Angular/TS/JS中创建Blob类型File对象解决FormData报错问题

FormData的append方法要求第二个参数必须是Blob或其子类（比如File），你插入的自定义对象不符合这个类型要求，所以触发了报错。要解决这个问题，核心是把自定义对象转换成标准的File类型，步骤如下：

转换逻辑 #

1. 序列化自定义对象：把对象转成可存储的字符串（通常用JSON序列化）
2. 生成Blob对象：将字符串包装成Blob，并指定对应的MIME类型
3. 包装为File对象：用Blob创建File实例，设置文件名等属性

TypeScript代码示例 #

假设你的自定义对象结构如下，我们写一个通用转换函数：

// 自定义对象类型示例
interface CustomData {
  id: number;
  label: string;
  content: Record<string, any>;
}

// 自定义对象转File的工具函数
function convertToFile(obj: any, filename: string, mimeType = 'application/json'): File {
  // 1. 把对象序列化为JSON字符串
  const serializedData = JSON.stringify(obj);
  // 2. 创建Blob对象
  const blob = new Blob([serializedData], { type: mimeType });
  // 3. 包装成File对象
  return new File([blob], filename, { type: mimeType });
}

// 使用示例
const myCustomObj: CustomData = {
  id: 0,
  label: "自定义附加数据",
  content: { status: "pending", remark: "手动插入的数据" }
};

// 转换为File类型
const customFile = convertToFile(myCustomObj, "custom-attachment.json");

// 构建符合要求的files数组
const files: File[] = [
  customFile, // 手动插入的转成File的对象
  yourUploadedFile // 用户上传的原始File对象
];

// 现在可以正常使用FormData.append了
const formData = new FormData();
files.forEach((file, idx) => {
  formData.append(`files[${idx}]`, file);
});

额外说明 #

• 如果你的自定义对象不是JSON格式（比如纯文本、CSV），只需要调整序列化方式和MIME类型：比如纯文本直接用String(obj)，MIME类型设为text/plain
• 文件名和MIME类型可以根据后端接口要求调整，确保后端能正确解析文件内容

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