React Dropzone+Multer上传图片失败 req.file为undefined问题

核心排查点按出现概率从高到低排序： #

• 请求头配置错误（90%的人踩这个坑）
  立刻删掉你手动加的'Enc-Type': 'multipart/form-data'配置，同时绝对不要手动设置Content-Type: multipart/form-data请求头。
  当你通过axios/fetch发送FormData对象时，必须让浏览器自动生成Content-Type请求头，浏览器会自动在multipart类型后面拼接专属的boundary分隔符，你手动写死的请求头没有这个分隔符，multer根本无法解析表单内容，直接返回undefined。
• FormData字段名与后端配置不匹配
  你后端multer单文件上传配置的字段名，必须和前端formData.append()的第一个参数完全一致，大小写、拼写错一个字符都拿不到文件：

  // 后端配置示例：接收字段名为 bugScreenshot 的单文件
  router.post('/upload', upload.single('bugScreenshot'), (req, res) => {
    console.log(req.file)
  })
  

  // 前端必须对应写完全一致的字段名
  const formData = new FormData()
  // 直接append react-dropzone返回的原生File对象，不要做JSON序列化
  formData.append('bugScreenshot', acceptedFiles[0])
  

  注意：react-dropzone返回的acceptedFiles数组项本身就是原生File实例，不要传file.preview路径、不要传序列化后的字符串，必须直接传入File实例本身。
• 后端中间件顺序错误
  multer解析中间件必须放在路由处理函数之前挂载，顺序颠倒的话路由执行时multer还没解析请求，自然拿不到req.file：

  // ❌ 错误顺序
  router.post('/upload', (req, res) => res.send(req.file))
  router.post('/upload', upload.single('bugScreenshot'))
  
  // ✅ 正确顺序
  router.post('/upload', upload.single('bugScreenshot'), (req, res) => {
    // 逻辑处理
    res.send({ success: true, file: req.file })
  })
  

  另外注意不要让express.json()、express.urlencoded()这类body解析中间件作用于上传路由，这类中间件会尝试解析JSON/表单编码格式的请求，会干扰multipart格式的解析流程。
• 基础配置校验
  • 确认上传接口使用POST请求方法，GET请求无请求体无法传输FormData
  • 确认multer配置的存储路径真实存在、有写入权限，测试阶段可以直接用最简配置：const upload = multer({ dest: 'uploads/' })，提前在项目根目录创建好uploads文件夹
  • 如果用axios发请求，不要配置transformRequest把FormData转换成JSON字符串，保持默认请求配置即可

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