React多文件上传至Node.js服务器异常：req.files为空求助

问题现象 #

Postman测试Multer构建的文件上传API正常，但React前端上传时，Node.js服务器端的req.files为undefined，文件数据反而出现在req.body中，无法正确解析上传的文件。

前端代码 #

FormData构建代码 #

const formData = new FormData();
for (let i = 0; i < photos.length; i++) {
  console.log(photos[i]);
  formData.append(`photos[]`, photos[i]);
}
formData.append(`firstName`, firstName);
formData.append(`lastName`, lastName);
formData.append(`email`, email);
formData.append(`password`, password);

表单与文件输入 #

<form onSubmit={submitHandler} encType="multipart/form-data">
  <input
    type="file"
    name="photos"
    className="form-control"
    multiple
    max={4}
    onChange={handleFileChange}
  />
  <!-- 其他表单字段 -->
</form>

后端代码 #

Multer配置 #

const multer = require('multer');
const path = require('path');

module.exports = multer({
    storage: multer.diskStorage({}),
    fileFilter: (req,file,cb)=>{
        let ext = path.extname(file.originalname);
        if(ext === '.jpeg' || ext ===  '.jpg' || ext ===  '.png' || ext === '.pdf' || ext === ".txt" || ext === ".doc"){
          cb(null,true)
        }else{
          cb({error:'You can not upload this type of file'},false)
        }
      }
})

路由配置 #

router.post('/users/register', upload.array("photos", 4), registerValidation(), validate, UserController.registerUser);

服务器端日志 #

console.log(req.files) => undefined 
console.log(req.body) => {
  photos: [ {}, {}, {} ], // 文件数据错误出现在body中
  firstName: 'Test',
  lastName: 'Two',
  email: 'test111@test.com',
  password: '123456'
}

解决方案 #

• 修正FormData的文件字段名：
  Multer的upload.array("photos")监听的是名为photos的字段，前端不需要给字段名加[]，直接使用photos作为key重复append即可，Multer会自动解析为数组。修改后的FormData代码：

  const formData = new FormData();
  for (let i = 0; i < photos.length; i++) {
    console.log(photos[i]);
    formData.append(`photos`, photos[i]); // 移除[]
  }
  // 其他字段保持不变
  

• 禁止手动设置请求的Content-Type：
  若使用axios等库发送请求，不要手动指定Content-Type: multipart/form-data。FormData会让浏览器自动生成包含正确边界（boundary）的请求头，手动设置会丢失边界信息，导致Multer无法解析文件。正确的请求示例：

  // 正确写法
  axios.post('/users/register', formData)
    .then(res => console.log(res))
    .catch(err => console.error(err));
  

• 检查Express中间件顺序：
  确保express.json()和express.urlencoded()中间件在Multer路由之前加载，避免中间件干扰Multer对multipart数据的解析。示例：

  const express = require('express');
  const app = express();
  const upload = require('./multer-config');
  const router = require('./router');
  
  // 先加载解析JSON和urlencoded的中间件
  app.use(express.json());
  app.use(express.urlencoded({ extended: true }));
  
  // 再加载带Multer的路由
  app.use(router);
  

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