ng2-file-upload:如何更改文件上传的表单数据名称



我目前正在使用此代码进行文件上传(Angular 2+(:

upload() {
  let inputEl: HTMLInputElement = this.inputEl.nativeElement;
  let fileCount: number = inputEl.files.length;
  let formData = new FormData();
  if (fileCount > 0) { // a file was selected
      for (let i = 0; i < fileCount; i++) {
          formData.append('files', inputEl.files.item(i));
      }
      this.http.post(mySecretUrl, formData, {observe: 'response'}).subscribe(err => this.handleError(err), resp => {
        console.log(resp);
      });
  }
}

使用html:

<input #fileInput type="file" [multiple]="true" id="file-upload" size="60">

这工作正常,但我想使用 ng2-file-upload,因为该软件包附带的所有额外好处。

当我输入 ng2 文件上传的代码并尝试上传时,出现 500 错误。我 100% 确定问题是键名称"文件",您可以在旧代码的这一行中找到它:

formData.append('files', inputEl.files.item(i));

使用 ng2-文件上传时,如何将表单数据键名称添加/更改为"文件"?

顺便说一句,这是我用于ng2文件上传的代码:

    function readBase64(file): Promise<any> {
    var reader  = new FileReader();
    var future = new Promise((resolve, reject) => {
      reader.addEventListener("load", function () {
        resolve(reader.result);
      }, false);
      reader.addEventListener("error", function (event) {
        reject(event);
      }, false);
      reader.readAsDataURL(file);
    });
    return future;

    }
    const URL = 'mySecretUrl';
    private uploader:FileUploader = new FileUploader({
      url: URL, 
      disableMultipart:true
    });
    public hasBaseDropZoneOver:boolean = false;
    fileObject: any;
    public fileOverBase(e:any):void {
      this.hasBaseDropZoneOver = e; 
    }
    public onFileSelected(event: EventEmitter<File[]>) {
      const file: File = event[0];
      console.log(file);
      readBase64(file)
        .then(function(data) {
        console.log(data);
      })
    }

和 html:

<input type="file" ng2FileSelect [uploader]="uploader" multiple (onFileSelected)="onFileSelected($event)"  />

编辑:

我想我的问题的答案是:

    public uploader: FileUploader = new FileUploader({
        ...
        itemAlias: 'files'
        ...
    })

。但是当我尝试上传时,我仍然收到 500(内部服务器错误(......

>如果服务器端出现问题,通常会发生 500 错误。尝试查看您的 API 终端节点配置是否正确。

最新更新