React上传图片至Node后端时接收空对象问题求助

核心原因 #

Node.js默认的body-parser中间件无法解析multipart/form-data格式的请求，直接读取req.body自然会得到空对象；同时上传的文件数据需要通过专门的中间件来处理。

解决步骤 #

1. 安装文件处理中间件multer

在后端项目中执行：

npm install multer

2. 配置multer并修改路由

在你的路由文件中引入multer，配置存储方式并更新路由：

const multer = require('multer');
// 内存存储（适合临时处理），也可配置磁盘存储持久化文件
const storage = multer.memoryStorage();
const upload = multer({ storage: storage });

// 路由添加multer中间件，'file'对应前端FormData中append的键名
router.post("/setImage", upload.single('file'), userController.setImage);

3. 修改后端控制器获取文件数据

控制器中不再从req.body取数据，而是从req.file获取上传的文件信息：

async setImage(req, res, next) {
  try {
    // 文件数据存储在req.file中
    const uploadFile = req.file;
    console.log(uploadFile);
    // 此处可添加文件处理逻辑（如保存到磁盘、上传云存储等）
    res.status(200).json({ message: '文件上传成功' });
  } catch (e) {
    next(e);
  }
}

4. 前端优化（可选但推荐）

删除手动设置的content-type，axios会自动根据FormData生成包含boundary的正确请求头，避免解析错误：

const uploadFile = (e: any) => {
  e.preventDefault();
  const data = new FormData();
  data.append("file", fileData);
  axios({
    method: "POST",
    url: "http://localhost:5000/api/setImage",
    data: data,
    // 移除下面的headers配置
    // headers: {
    //   "content-type": "multipart/form-data",
    // },
  }).then((res) => {
    alert(res.data.message);
  });
};

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