React前端向Node.js后端传多文件时req.files为空求助

问题描述 #

尝试将文件提交至MongoDB Schema，但后端API的req.files始终为空，已尝试upload.array()、upload.any()等multer方法，均无效果。

排查与解决步骤 #

前端侧检查 #

• 确认前端使用FormData对象传递文件，不要手动设置Content-Type，浏览器会自动为FormData添加正确的multipart/form-data头部
• 核对FormData的文件字段名与后端multer配置的字段名一致，比如后端用upload.array('fileList')，前端就要执行formData.append('fileList', file)
• 在前端通过console.log(formData.get('fileList'))验证文件是否成功添加到FormData中

后端multer配置检查 #

• 确保multer中间件正确挂载到目标路由，且配置了基础存储路径（避免无存储配置导致异常），示例代码：

  const multer = require('multer');
  const upload = multer({ dest: './uploads/' }); // 指定临时存储目录
  app.post('/your-upload-api', upload.array('fileList'), (req, res) => {
    console.log(req.files); // 此时应能获取到文件数组
    // 后续写入MongoDB的逻辑
  });
  

• 排查是否有冲突的中间件，比如body-parser默认不处理multipart/form-data，但不要在multer之前挂载bodyParser.raw()这类可能截断请求的中间件
• 尝试升级multer到最新稳定版：npm install multer@latest

路由与请求匹配检查 #

• 确认前端请求的URL、请求方法（必须是POST）与后端路由完全匹配
• 若使用反向代理（如Nginx），检查代理配置是否允许传递multipart/form-data类型的请求，避免文件内容被截断

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