Angular 7 - загрузка нескольких файлов вместе с данными и отчет о проделанной работе - PullRequest
Новая
       11

Angular 7 - загрузка нескольких файлов вместе с данными и отчет о проделанной работе

0 голосов
/ 03 февраля 2019

Я хочу загрузить несколько файлов / изображений, используя angular v.7 (также угловой материал, если это помогает), и в той же форме DataData будут включены дополнительные данные, такие как заголовок или какой-либо текст.Мне удалось все это сработать, но проблема в том, что я не могу получить отчет о прогрессе для каждого файла, вместо этого отчет, который я получаю, предназначен для всех файлов вместе, как один отчет.

Как это исправить?

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,45 МБ, в консоль я получил это 

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

Iожидать получения отчета о прогрессе для каждого файла, а не для всех вместе

1 Ответ

0 голосов
/ 03 февраля 2019

reportProgress будет работать только для соответствующего HTTP-запроса, поэтому при вызове функции http.post с вашим объектом данных формы formD он будет только сообщать о ходе выполнения этого конкретного запроса, содержащего все ваши данные.

Вам нужно будет разделить загрузку файла на несколько запросов, чтобы получить прогресс для каждого отдельного процесса загрузки.Этого можно достичь, введя свойство массива 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..);
...