TypeScript遍历FormData报错：Type 'FormData'非数组或字符串类型

咱们一步步拆解你代码里的问题：

1. 文件获取的类型错误 #

在handleFile方法里，event.target.files是FileList对象（类数组结构，包含所有选中的文件），但你定义的fileToUpload是单个File类型，直接赋值会导致类型不匹配，而且后续调用this.fileToUpload.name也会报错——因为FileList根本没有name属性。

修正方法：取FileList里的第一个文件（如果支持多选，可以遍历处理所有文件）：

handleFile(event) {
  const selectedFiles = event.target.files;
  if (selectedFiles.length > 0) {
    this.fileToUpload = selectedFiles[0];
    this.uploadImages.append(this.fileToUpload.name, this.fileToUpload);
  }
}

2. FormData遍历的类型报错 #

你遇到的Type 'FormData' is not an array type or a string type，是因为TypeScript默认的类型定义中，早期版本没有为FormData添加迭代器支持，导致无法直接用for...of遍历。

解决这个问题有两种常用方案：

方案一：转换为数组后遍历 #

利用FormData.entries()获取键值对迭代器，再用Array.from()转成数组：

save() {
  // entries()返回[key, file]格式的键值对数组
  for (let [key, file] of Array.from(this.uploadImages.entries())) {
    this.imageService.createImage(file); // 按需传参，这里传单个文件示例
  }
}

方案二：使用FormData内置的forEach方法 #

FormData本身提供了更简洁的forEach遍历方式：

save() {
  this.uploadImages.forEach((file) => {
    this.imageService.createImage(file);
  });
}

额外：让TypeScript原生支持FormData迭代 #

如果你一定要用for...of直接遍历FormData，可以修改tsconfig.json的lib配置，添加ES2018或更高版本（FormData迭代器是ES2018引入的）：

{
  "compilerOptions": {
    "lib": ["ES2018", "DOM"]
    // 其他配置项...
  }
}

配置后就能直接用for...of遍历FormData了：

save() {
  for (let [key, file] of this.uploadImages) {
    this.imageService.createImage(file);
  }
}

3. 语法错误 #

你的save方法里多了一个多余的});，这会直接导致语法报错，修正时注意闭合花括号的正确性。

最终修正后的完整代码示例 #

export class NewsCreationComponent implements OnInit {
  fileToUpload: File | null = null; // 改成可空类型更严谨
  uploadImages = new FormData();
  
  // ...其他组件逻辑

  handleFile(event) {
    const selectedFiles = event.target.files;
    if (selectedFiles.length > 0) {
      this.fileToUpload = selectedFiles[0];
      this.uploadImages.append(this.fileToUpload.name, this.fileToUpload);
    }
  }

  save() {
    this.uploadImages.forEach((file) => {
      this.imageService.createImage(file);
    });
  }
}

内容的提问来源于stack exchange，提问作者krise