如何更改“ng2-file-upload”默认行为以将文件输入的名称属性更改为“文件”答案

【问题标题】：How can i change 'ng2-file-upload' default behavior to change the name attribute of the file input to 'file'如何更改“ng2-file-upload”默认行为以将文件输入的名称属性更改为“文件”
【发布时间】：2019-01-18 17:08:51
【问题描述】：

我正在尝试构建一个有角度的表单，我将在其中上传 2 张不同的照片。

我在 nodejs 上使用“multer”，在角度使用“ng2-file-upload”。

我需要为每张照片设置一个唯一标识符，以便能够正确处理它们。

multer 设置为使用 html 名称属性。问题是 ng2-file-upload 默认将输入类型文件的属性 name 更改为字符串 file。 p>

当我尝试运行这段代码时：

Node.js：

const upload = multer({
    storage
    }).fields([
       { name: 'posterPic'},
       { name: 'widePic'}
  ]);

角度：

<div class="form-group">
    <input type="file" id="posterPic" [name]="posterPic" ng2FileSelect [uploader]="uploader">
</div>
 <div class="form-group">
    <input type="file" id="widePic" [name]="widePic" ng2FileSelect [uploader]="uploader">
 </div>

上传时 - 'ng2-file-upload' 将 name="posterPic" 和 name="widePic" 更改为 name="file"。

错误：

{ [Error: Unexpected field]
  code: 'LIMIT_UNEXPECTED_FILE',
  field: 'file',
  storageErrors: [] }

任何人都知道如何更改 ng2-file-upload 默认行为以将文件输入的名称属性更改为“文件”？

非常感谢！

附言

告诉 multer 接受 any() 对我没有帮助。我需要能够识别这 2 个不同的输入。

【问题讨论】：

标签： javascript node.js angular multer ng2-file-upload

【解决方案1】：

刚刚遇到了同样的问题，有一个简单的解决方法可以解决这个问题。

在您上传文件之前更改 FileItem 别名属性，这将更改表单数据名称属性值。

例如在你看来：

<input type="file" (onFileDrop)="startUpload()" ng2FileSelect [uploader]="uploader">

在你的组件中：

startUpload(){
    this.uploader.queue[0].alias = "posterPic"  // Or your file name
    this.uploader.queue[0].upload()
}

解决方案取自here。

【讨论】：