React JS请求中文件对象为空：如何在FormData中正确传递文件？

你看到请求里file显示为空对象，核心原因是File对象无法被JSON序列化——当你直接把包含File的普通对象数组作为请求体发送时，浏览器会自动尝试序列化，导致File对象的内容丢失，变成空的{}。而FormData是专门用于文件上传的格式，必须正确将File对象追加到FormData中，才能让API正常识别文件。

修正步骤与代码示例 #

1. 保留文件选择逻辑：你当前的文件选择和状态存储逻辑是没问题的，继续用它来保存文件和预览用的Blob URL：

let newUploaded = [...uploaded];
for (var i = 0; i < e.target.files.length; i++) {
    newUploaded.push({
        url: URL.createObjectURL(e.target.files[i]),
        file: e.target.files[i],
    })
}
setUploaded(newUploaded);

2. 构建FormData并发送请求：在发送请求时，不要直接序列化uploaded数组，而是从状态中取出File对象，逐个追加到FormData里：

// 创建FormData实例
const formData = new FormData();

// 遍历上传列表，追加文件到FormData
uploaded.forEach((item) => {
    // 第一个参数是API接收的字段名，第二个是File对象，第三个可选参数是文件名
    formData.append('upload_files', item.file, item.file.name);
});

// 发送请求（以fetch为例）
fetch('/你的API接口地址', {
    method: 'POST',
    body: formData, // 直接传入FormData作为请求体
})
.then(res => res.json())
.then(result => console.log('上传成功:', result))
.catch(err => console.error('上传失败:', err));

关键注意事项 #

• 不要手动设置Content-Type: multipart/form-data：浏览器在使用FormData时会自动生成包含边界符的正确请求头，手动设置会导致API无法解析文件。
• 后端接收时，要对应FormData里的字段名（比如示例中的upload_files）来获取文件。如果需要上传多个文件，保持字段名一致即可，后端通常会以数组形式接收。
• 状态里的url（Blob URL）仅用于前端图片预览，不需要传给API，上传核心依赖的是file对应的File对象。

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