MERN应用中前端Axios请求后后端未接收到req.formData问题

前端代码错误修复 #

你的Axios请求写法存在三个关键问题：

• Axios请求体（第二个参数）需直接传入FormData实例，不能包裹在对象中
• 手动设置Content-Type: multipart/form-data会丢失自动生成的boundary，导致后端无法解析，应移除该配置
• withCredentials属于Axios配置项，要放在第三个参数的配置对象内

修正后的前端代码：

const handleDp = async(e)=>{
  e.preventDefault()
  const file = fileRef.current.files[0]
  console.log(file)
  console.log('11');
  let formData = new FormData();
  formData.append("image", file, file?.name)
  
  await axios.patch('http://localhost:3000/update', formData, {
    withCredentials: true,  
    headers: {
      'x-access-token': localStorage.getItem('token')
    }
  })
  .then(res => {
    if (res.data.success) {
      console.log("profile updated");
      window.location.reload();
    }
  })
}

后端代码错误修复 #

后端控制器存在以下错误：

• console.log(formData)是未定义变量，直接删除即可
• req.formData不存在，multer处理文件上传后，文件信息会存在req.file中，无需访问req.formData
• 路径处理需直接使用req.file.path，而非data.path

修正后的后端控制器代码：

const updateProfile = async(req,res,next)=>{
  const file = req.file
  console.log(file);
  
  if(!req.file){
    return res.json({error: 'Image is required'})
  }
  
  const path = file.path.slice(7)
  const filepath = `http://localhost:3000/${path}`
  
  try {
    await User.findOneAndUpdate({_id: req.id}, {$set:{image:filepath}})
    console.log("file updated");
    res.json({success: true, url:filepath})
  } catch (error) {
    console.log(error)
    res.json({error: 'Update failed'})
  }
}

关键补充说明 #

1. 前端必须直接将FormData作为请求体传递，Axios会自动设置包含boundary的正确Content-Type
2. multer中间件upload.single('image')会将上传文件解析到req.file，普通表单字段解析到req.body
3. 确保你的userMiddleware.upload是正确配置的multer实例，示例配置如下：

const multer = require('multer');
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/') // 需确保uploads文件夹已创建
  },
  filename: function (req, file, cb) {
    cb(null, Date.now() + '-' + file.originalname)
  }
});
const upload = multer({ storage: storage });

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