React搭配Express使用FormData提交POST请求时req.body为空

你遇到的req.body为空的问题，本质是Express内置的请求解析中间件存在格式能力边界：

• express.json() 仅能解析application/json格式的请求负载，也就是你之前发JSON请求能正常拿到数据的原因
• express.urlencoded({ extended: true }) 仅能解析application/x-www-form-urlencoded格式的请求，对应你Postman选x-www-form-urlencoded能正常拿到数据的场景
• 上述两个内置中间件完全不支持解析multipart/form-data格式的请求——也就是前端用FormData提交、Postman选form-data格式时生成的请求，没有对应中间件读取、解析请求流，最终到达业务逻辑时req.body自然是完全空的。

你当前的代码还有一处关键配置遗漏：虽然引入了fileUpload的模块，但没有把multipart格式的解析中间件挂载到路由的处理链中，反而在业务逻辑内部手动调用upload方法，此时请求流已经经过了中间件层，根本无法完成解析。

1. 安装依赖 #

Express生态处理multipart格式的通用成熟库为multer，执行安装命令：
npm install multer

2. 重构文件上传中间件 #

替换原有middleware/fileUpload的实现，使用multer定义存储、过滤规则，示例代码：

// middleware/fileUpload.js
const multer = require('multer')
const path = require('path')

// 配置文件存储规则
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'public/uploads/') // 需提前创建该目录，保证有读写权限
  },
  filename: (req, file, cb) => {
    const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9)
    cb(null, `${file.fieldname}-${uniqueSuffix}${path.extname(file.originalname)}`)
  }
})

// 配置文件过滤规则
const fileFilter = (req, file, cb) => {
  if (file.mimetype.startsWith('image/')) {
    cb(null, true)
  } else {
    cb(new Error('仅支持上传图片格式文件'), false)
  }
}

// 生成multer实例
const upload = multer({
  storage,
  fileFilter,
  limits: { fileSize: 1024 * 1024 * 5 } // 限制单文件最大5M
})

module.exports = upload

3. 正确挂载中间件到路由处理链 #

把multer的解析方法作为前置中间件放到/addMenu路由的处理顺序中，位置在字段校验、权限校验之前，保证请求流被正确解析：

router.post(
  '/addMenu',
  upload.single('file'), // 字段名和前端FormData.append的文件字段名保持一致
  [
    check('name', '菜单名称为必填项！').not().isEmpty(),
    check('price', '价格为必填项！').not().isEmpty(),
    check('category', '分类为必填项！').not().isEmpty(),
  ],
  verifyAuth,
  (req, res) => {
    // 此处req.body会正常解析出name、price、category文本字段，req.file为上传的文件对象
    console.log(req.body)
    // 后续业务逻辑...
  }
)

• 不要手动在业务逻辑内部调用upload方法：multer需要在请求到达时第一时间读取请求流，手动调用的时机滞后会导致无法解析数据，必须以中间件形式前置挂载
• 保证字段名完全匹配：upload.single()括号内的字段名，必须和前端FormData.append时定义的文件字段名、Postman中form-data的key名完全一致，否则会出现解析失败
• 前端不要手动设置Content-Type: multipart/form-data：使用axios提交FormData时，让浏览器自动生成带boundary标识的请求头即可，手动设置会因为缺少boundary参数导致后端解析失败
• 服务端无需额外配置CORS：你之前的JSON、x-www-form-urlencoded请求都能正常通信，说明跨域配置已经生效，问题和CORS无关

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