React.js通过Springboot API批量上传文件失败求助

问题核心原因 #

你遇到的请求中显示[object Object]而非文件二进制的问题，主要来自两个点：

1. 遍历逻辑错误：外层遍历data数组的每个element，但内层却遍历data.actualFiles（整个数组的属性），而非当前element对应的文件列表，导致文件匹配逻辑混乱，可能根本没正确把文件加入FormData；
2. FormData添加的不是原生File对象：如果data.actualFiles里的file是自定义对象（而非通过<input type="file">获取的原生File实例），FormData无法识别为文件，会自动转为字符串[object Object]。

修复代码与步骤 #

1. 修正遍历与匹配逻辑 #

确保找到当前element对应的原生File对象，再加入FormData：

// 假设data是待上传的关联数据数组，data.actualFiles是所有选中的原生File对象集合
data.forEach(element => {
    const formData = new FormData();
    // 精准匹配当前element对应的文件
    const matchedFile = data.actualFiles.find(file => file.name === element.attachmentUIDTO.fileName);
    
    if (matchedFile) {
        // 第三个参数可选，用来指定文件名称，避免后端获取文件名异常
        formData.append('file', matchedFile, matchedFile.name);
    }
    
    // 发送请求时，无需手动设置Content-Type，axios会自动处理multipart/form-data边界
    api.post(`${serviceEnpoints.PRFS_UPLOAD}`, formData)
      .then(res => console.log('单个文件上传成功', res))
      .catch(err => console.error('单个文件上传失败', err));
});

2. 关键注意事项 #

• 确认File对象有效性：检查data.actualFiles中的每个项是否是原生File实例（比如从input的files属性获取的），如果是自定义对象，需要从中提取真正的File数据；
• 不要手动设置请求头边界：使用axios时，直接传入FormData即可，框架会自动生成带正确边界的multipart/form-data请求头，手动设置容易导致边界不匹配；
• 处理异步请求：原代码未处理请求异步，建议用.then()/.catch()或async/await管理请求状态，避免并发请求过多引发问题。

3. 批量上传优化（可选） #

如果需要一次性上传所有文件而非逐个上传，可将所有匹配文件加入同一个FormData：

const formData = new FormData();
data.forEach(element => {
    const matchedFile = data.actualFiles.find(file => file.name === element.attachmentUIDTO.fileName);
    if (matchedFile) {
        // 用同一个key多次添加，后端需支持接收文件数组
        formData.append('files', matchedFile, matchedFile.name);
    }
});

api.post(`${serviceEnpoints.PRFS_UPLOAD}`, formData)
  .then(res => console.log('批量上传成功', res))
  .catch(err => console.error('批量上传失败', err));

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