前端通过fetch发送FormData至后端失败：req.body为null

问题现象 #

React前端通过自定义Request类（基于fetch）提交FormData时，后端使用multer处理multipart/form-data请求，出现req.body为null、req.file为undefined的情况；但用Postman发送结构完全一致的请求，后端处理完全正常。

核心检查内容 #

1. 前端代码 #

const formData = new FormData();
formData.append('file', values.image);
formData.append('path', 'image');
formData.append('model', 'item');
formData.append(
  'data',
  JSON.stringify({
    menu: menu._id.toString(),
    item: values.item,
  })
);

const req = new Request(`/api/v1/upload`, {
  method: 'POST',
  body: formData,
});

注：自定义Request类功能与fetch一致，仅简化了response.json()的重复调用步骤。

2. 后端代码（multer标准配置） #

const storage = multer.memoryStorage();

const upload = multer({ storage, fileFilter });

exports.processImage = (req, res, next) => {
  if (!req.file) return next();

  req.file.filename =
    req.modelController.createFileName(req, req.file) + '.jpeg';

  sharp(req.file.buffer)
    .toFormat('jpeg')
    .toFile(
      path.join(
        `public/image/upload/${req.body.model.toLowerCase()}`,
        req.file.filename
      )
    );

  next();
};

3. 验证信息 #

• Postman发送同结构请求可正常被后端处理，生成的请求代码与前端逻辑类似
• 浏览器Network面板显示请求头正常，Content-Type为multipart/form-data
• 后端异常表现：req.body为null，req.file为undefined

已尝试的排查动作 #

• 确认Content-Type由FormData自动生成，未手动设置
• 确认values.image为[Object File]类型
• 表单使用Formik处理，已验证文件正确存入values.image

可能的排查方向及解决方案 #

1. 检查自定义Request类的默认配置
   自定义Request类可能默认添加了额外请求头（比如手动设置Content-Type: application/json），覆盖了FormData自动生成的带boundary的multipart/form-data头。需确保Request类在发送FormData时，不手动设置Content-Type，让浏览器自动处理。

2. 验证multer中间件的挂载顺序
   确认后端路由中multer中间件（比如upload.single('file')）是否在processImage之前挂载，且字段名'file'与前端FormData中的file字段完全一致。中间件顺序错误或字段名不匹配，会导致multer无法解析文件和表单数据。

3. 检查FormData的构造完整性
   在前端发送请求前，打印FormData的所有键值对，确认file字段包含有效文件对象：

   for (let [key, value] of formData.entries()) {
     console.log(key, value);
   }
   

   若file字段为空或非File对象，需排查Formik表单中文件输入的绑定逻辑是否正确。

4. 验证跨域配置
   若前后端存在跨域，需确认后端CORS配置允许multipart/form-data类型请求，且未拦截表单数据处理逻辑。

5. 检查multer的fileFilter函数
   若自定义了fileFilter，确认该函数未错误拒绝文件上传，导致multer不解析文件和表单数据。可临时注释fileFilter测试是否能正常接收文件。

内容的提问来源于stack exchange，提问作者The Khateeb Dev