Question

我正在尝试为每个文件上传多个带有标题的文件，但在将请求传递给服务器时，我试图逐个传递每个文件及其标题。我有一个名为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);
 }

Answer 1

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

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

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

1 个答案: