包含文件的对象数组转FormData时文件为空、后端req.files为空是什么原因？

问题原因 #

• JSON.stringify()无法序列化File/Blob类型对象：JSON的序列化规则仅支持基础类型、普通对象、数组等标准可序列化结构，遇到File这类浏览器内置的二进制宿主对象时，会直接序列化为空对象{}，这就是你打印结果中file字段为空的原因。
• FormData的文件传输规则要求文件必须作为独立值挂载：后端的req.files只会识别FormData中直接挂载的二进制字段，你把文件包在JSON字符串中作为普通文本传输，后端不会主动解析JSON内容提取文件，自然返回空数组。

解决方案 #

将普通业务字段和文件字段拆分后分别append到FormData中，参考实现代码如下：

let data = getInfo();

for (let p of data) {
    const formData = new FormData();
    // 拆分文件字段和其余普通业务字段
    const { file, ...commonParams } = p;
    // 普通业务字段可以转成JSON串传输，也可以逐个append到FormData中
    formData.append("data", JSON.stringify(commonParams));
    // 单独append文件，注意字段名需要和后端约定的接收字段名保持一致
    formData.append("file", file);
}

注意事项 #

• 发送请求时不要手动设置Content-Type: multipart/form-data请求头，浏览器会自动为FormData类型的请求生成带边界标识的正确请求头，手动设置会导致边界标识缺失，后端无法正常解析请求体。
• 如果单条数据包含多个文件，append文件时字段名需要添加[]后缀（例如formData.append("files[]", fileItem)），可以适配绝大多数后端框架的多文件解析规则。

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