javascript - Angular 7 - 上传多个文件以及数据和报告进度

Question

我想使用 angular v.7 上传多个文件/图像(如果有帮助，也可以使用 angular Material )，并且在相同的 formData 中将包含更多数据，例如标题或一些文本。我设法解决了所有这些问题，但问题是我无法获得每个文件的报告进度，而是我得到的报告是所有文件的报告。

我该如何解决这个问题？

HTML

<input type="file" id="mediaFile" #mediaFile multiple (change)="fileAdded($event)">

JS

this.selectedFiles: Files[] = [];

// when files are selected, save them in array selectedFiles
fileAdded(event) {
  if(event.target.files.length){
    for(let i=0 ; i < event.target.files.length ;i++){ 
      this.selectedFiles.push(<File>event.target.files[i]);
    }
  }
}


// upload data
upload() {
   this.message = "";
   // stop here if form is invalid
   if (this.shareForm.invalid) { this.message = "Fill the required fields"; return; }

   this.formD = new FormData();
   this.formD.append('firstname', this.shareForm.value.firstname);
   this.formD.append('lastname', this.shareForm.value.lastname);
   this.formD.append('position', this.shareForm.value.position);

   if(this.selectedFiles.length){
     for(let i=0 ; i < this.selectedFiles.length ; i++)
       this.formD.append('files[]', this.selectedFiles[i],this.selectedFiles[i].name);
   }

   this.loading = true;

   this.http.post<any>(myUrl, this.formD,{
    reportProgress: true,
    observe: 'events',
    withCredentials:true
  })
  .subscribe(
     res => {
       console.log(res)
       this.loading = false;
     },
     error => {
       this.message = error.message;
       this.loading = false;
    }
   );
}

我上传了两个文件，每个大约 0.45MB，在控制台中我得到了这个

{
  loaded: 868352,
  total: 976970,
  type: 1
}

我希望得到每个文件的进度报告，而不是所有文件的进度报告

Answer 1

reportProgress 仅适用于相应的 HTTP 请求，因此当使用 formD 表单数据对象调用函数 http.post 时，它将仅报告包含您所有数据的特定请求的进度。

您必须将文件上传分成多个请求，以便获得每个上传过程的进度。这可以通过引入 FormData 数组属性来实现，其中每个数组条目仅包含一个单独的文件。然后，您可以为每个 FormData 实例发出请求，例如首先创建 HTTP POST 请求可观察对象，然后通过 RxJS forkJoin 运算符组合它们。

const httpRequests = this.formDataObjects.map((formData) => 
  this.http.post<any>(myUrl, formData,{
    reportProgress: true,
    observe: 'events',
    withCredentials:true
  })
);

forkJoin(httpRequests).subscribe(..*your subscription logic here..);