React+Express集成Multer无法上传文件问题求助

核心问题 #

前端发送请求时使用JSON格式传递文件，而Multer仅支持解析multipart/form-data格式的请求体，因此无法识别文件。Postman能正常工作是因为它默认用FormData格式发送文件请求。

前端修改步骤 #

将请求体改为FormData格式，替换原有axios请求代码：

const formData = new FormData();

// 添加user数据（根据你的user结构调整，这里以对象为例）
Object.entries(user).forEach(([key, value]) => {
  formData.append(key, value);
});

// 逐个添加employeeDocuments中的文件
user[2].documents.forEach(file => {
  formData.append('employeeDocuments', file);
});

// 发送请求，无需手动设置Content-Type，axios会自动处理
axios.post('http://localhost:5000/AddEmployee', formData)
  .then(res => { 
    console.log(res)
  })
  .catch(err => { 
    console.log(err) 
  })

后端确认事项 #

确保路由正确使用uploadMultiple中间件：

// 示例路由代码
app.post('/AddEmployee', uploadMultiple, (req, res) => {
  // 通过req.files获取上传的文件列表
  console.log('上传的文件:', req.files.employeeDocuments);
  // 后续业务逻辑处理
  res.json({ success: true, message: '文件上传完成' });
});

关键注意点 #

• 禁止手动设置Content-Type: multipart/form-data，FormData会自动生成包含边界符的正确请求头，手动设置会导致Multer无法解析文件。
• 确认前端传递的file是标准的File对象（react-dropzone返回的acceptedFiles已经是File实例，无需额外转换）。

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