Angular2使用for循环调用http post方法答案

【问题标题】：Angular2 call http post method using for loopAngular2使用for循环调用http post方法
【发布时间】：2018-11-07 16:06:27
【问题描述】：

我正在尝试为每个文件上传多个带有标题的文件，但是在将请求传递给服务器时，我正在尝试逐个传递每个文件及其标题。我有一个名为 bindArray 的数组，其中包含类似

的数据

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

现在我在数组中使用循环将每个文件和标题发送到服务器。当我使用 bindArray 的[0] 时，它会将请求发送到服务器并成功执行，但在下一个请求中，即[1] 它正在发送[0] 的数据太和请求失败。我在我的 chrome 控制台网络选项卡中检查了这一点，并在请求 [1] 以前的文件时发现了它，并且数据也正在发送并导致错误。我已经搜索了我的问题，但没有可用的解决方案按预期工作。我不知道为什么会这样。

这是我的完整代码

上传.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>

上传.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');
       });
   } 
}

医生服务.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);
 }

【问题讨论】：

标签： angular typescript http for-loop file-upload

【解决方案1】：

您必须在每个循环中创建一个新的表单数据实例，以便表单数据只有一条记录。

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

【讨论】：