FormData.append() 在 FileList 上迭代是空的

Question

我很难弄清楚为什么 formData 使用 formData.append().[=17 遍历文件列表并将它们附加到空实例 FormData() 时返回空对象=]

MDN https://developer.mozilla.org/en-US/docs/Web/API/FormData/append

component.html

<input type="file" name="image" id="image" multiple accept="image/*" (change)="onImageSelect($event)"/>

component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-image-uploader',
  templateUrl: './image-uploader.component.html',
  styleUrls: ['./image-uploader.component.css']
})
export class ImageUploaderComponent {
  fileList: File[] = [];

  onImageSelect(files: any) {
    const formData = new FormData();

    this.fileList = files.target.files;

    for (const file of this.fileList) {
      formData.append('images[]', file, file.name);
      console.log(file, file.name);
    }
    console.log(formData); // returns an empty {}
  }
}

Answer 1

总是喜欢输入的替代品。在这种情况下，您可以使用

<input #filePicker type="file" ... (change)="onImageSelect(filePicker.files)" />

然后，在组件 class

onImageSelect(files: FileList): void {
  ...

  for (let i = 0; i < files.length; i++) {
    const file = files[i];
    formData.append('images[]', file, file.name);
  }
}

就是这样。
请记住，您不能使用 for-of 循环 FileList，因为它缺少 迭代器符号 。

FormData.append() 在 FileList 上迭代是空的

FormData.append() is empty iterating over a FileList

angular

angular-forms