admin 管理员组

文章数量: 1086019

I want to upload multiple file/images using angular v.7 (also angular material if it helps), and in the same formData will be included more data such as title or some text. I managed all this to work out but the problem is I can't get report progress per each file, instead the report I get is for all files together as one report.

How can I fix this?

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;
    }
   );
}

I uploaded two files each one about 0.45MB, in the console i get this

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

I expect to get report progress per each file and not for all together

I want to upload multiple file/images using angular v.7 (also angular material if it helps), and in the same formData will be included more data such as title or some text. I managed all this to work out but the problem is I can't get report progress per each file, instead the report I get is for all files together as one report.

How can I fix this?

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;
    }
   );
}

I uploaded two files each one about 0.45MB, in the console i get this

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

I expect to get report progress per each file and not for all together

  • javascript
  • ajax
  • angular
  • file-upload
Share Improve this question asked Feb 3, 2019 at 9:44 Alaa HliehelAlaa Hliehel 2491 gold badge5 silver badges10 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 5

reportProgress will only work for the respective HTTP request, so when calling the function http.post with your formD form data object, it will only report the progress for that particular request containing all your data.

You will have to split the file upload into multiple requests in order to get progress for each individual upload process. This could be achieved by introducing a FormData array property, where each array entry contains only one individual file. Then, you could fire a request for each FormData instance, e.g. via creating your HTTP POST request observables first and then bining them via the RxJS forkJoin operator.

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..);

本文标签： javascriptAngular 7Upload multiple files along with data and report progressStack Overflow

版权声明：本文标题：javascript - Angular 7 - Upload multiple files along with data and report progress - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1744066134a2527629.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。