如何在Angular 4中使用post请求API发送多个文件

时间:2018-02-13 16:21:50

标签: angular web-services typescript http file-upload

我想将多个文件附加到API,它只能发送一个文件。 我抓住所有文件和console.log(数组)给我所有文件,但我无法将所有文件发送到API,它只发送一个文件。

我的HTML组件

<input type="file" name="howeworkfile[]"  ngModel 
#howeworkfile="ngModel" multiple="multiple"  
(change)="getFile($event)" 
>

我的组件TS

getFile(event) {
let fileList: FileList = event.target.files;
if (fileList.length > 0) {
  console.log(fileList);
  let file: File = fileList[0];
  let formData: FormData = new FormData();
  formData.append('howeworkfile[]', file);
 formData.append('class_id', 7);
 formData.append('subject_id', 1);
 formData.append('school_id', 77);
 formData.append('name', 'sd');
 formData.append('description', 'sgerhgdf');
 formData.append('score', '2');
 formData.append('weight', 200);
 formData.append('type', 12);
 formData.append('deadline', '2018-02-13');
    this._http.post(this.url, formData)
  .subscribe(respo => {
    console.log(respo);
    // console.log(data.file);
  }, (err: HttpErrorResponse) => {
    console.log(err);
  });
 }
}}

1 个答案:

答案 0 :(得分:0)

应该是

<input type="file" multiple="multiple" (change)="getFile($event)">

...

getFile(event) {
    let fileList: FileList = event.target.files;
    let formData: FormData = new FormData();
    for (const file of fileList) {
        formData.append('some name', file, file.name) // file.name is optional
    }
    ...
}