Angular2 вызов HTTP пост метод с использованием цикла for - PullRequest
Новая
       12

Angular2 вызов HTTP пост метод с использованием цикла for

0 голосов
/ 29 мая 2018

Я пытаюсь загрузить несколько файлов с заголовком для каждого файла, но при передаче запроса на сервер я пытаюсь передать каждый файл и его заголовок по одному.У меня есть массив с именем bindArray, который имеет такие данные, как 

bindArray = [{file: File(), title: 'abc'}, {file:File(), title: 'bcd'}]

Теперь я использую цикл в массиве для отправки каждого файла и заголовка на сервер.когда я беру [0] из bindArray, он отправляет запрос на сервер, и он успешно выполняется, но при следующем запросе, т.е. [1], он также отправляет данные [0], и запрос не выполняется.Я проверил это на вкладке сети консоли Chrome и нашел его при запросе [1] предыдущего файла; данные также отправляются и вызывают ошибку.Я искал свою проблему, но ни одно из доступных решений не работает так, как ожидалось.Я не знаю, почему это происходит.

вот мой полный код

upload.html 

<input id="cin" name="file" type="file" (change)="fileChangeEvent($event)"
   multiple placeholder="Upload a file..."/>

<form #submitCertificate="ngForm">
  <div class="input" *ngFor="let a of titleArray">
    <input type="text" [(ngModel)]="a.title" name="title" *ngIf="showInput" (blur)="blurMethod()" placeholder="title"> <br>
  </div>
</form>
<button type="submit" (click)="upload('certificate')">upload</button>

upload.component.ts 

 files;
 formData;
 titleArray = [];
 showTitle: boolean = false;
 showInput: boolean = false;

 blurMethod() {
  this.title = this.titleArray;
 }

 fileChangeEvent(evt) {
   this.showInput = true;
   this.files = evt.target.files;
   for (let i = 0; i < this.files.length; i++) {
    this.addTitle();
   }
 }

 upload(docType) {

   if (this.files.length > 0) {
    let file;
    let title;
    const bindArray = [];
    this.formData = new FormData();
    for (let i = 0; i < this.files.length; i++) {
      for (let j = 0; j <= i; j++) {
        file = this.files[i];
        title = this.titleArray[j].title;

        if (i === j) {
          this.imageNameArray.push(file.name);
          bindArray.push({
            file: file,
            title: title
          });
       }
     }
   }
   for (let k = 0; k < bindArray.length; k++) {
     let formFile = {name: ''};
     let formFileName = '';
     let formTitle = '';
     formFile = bindArray[k].file;
     formFileName = formFile.name;
     formTitle = bindArray[k].title;
     this.formData.append('file', formFile, formFileName);
     this.formData.append('title', formTitle);

     this.doctorService.uploadDocuments(this.formData, docType)
       .subscribe(response => {
         console.log(response, "response")
       }, err => {
        console.log(err, 'err');
       });
   } 
}

doctorService.ts 

 uploadDocuments(formData, docType) {
   const headers = new Headers();
   headers.append('type', docType);

   return this.apiHelperService.post('https://someurl', formData, {headers: headers})
    .map(response => {
      return response.json();
    })
    .catch(this.handleError);
 }

1 Ответ

0 голосов
/ 29 мая 2018

Необходимо создать новый экземпляр данных формы в каждом цикле, чтобы в форме данных была только одна запись. 

for (let k = 0; k < bindArray.length; k++) {
 let formFile = {name: ''};
 let formFileName = '';
 let formTitle = '';
 formFile = bindArray[k].file;
 formFileName = formFile.name;
 formTitle = bindArray[k].title;
 this.formData.append('file', formFile, formFileName);
 this.formData.append('title', formTitle);

 // add these lines
 const uploadData = this.formData;
 this.formData = new FormData();
 // add these lines

 this.doctorService.uploadDocuments(uploadData, docType)
   .subscribe(response => {
     console.log(response, "response")
   }, err => {
    console.log(err, 'err');
   });
}
...