使用FormData向Express服务器传数据，服务器无法接收请求体问题

我尝试从客户端网站向自己的Express服务器发送数据，但服务器无法接收到内容——打印req.body得到的是空对象{}，我使用FormData来传递信息。

服务器代码 #

import express from "express";
import bodyParser from "body-parser";

app.use(express.json());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

const startServer = () => {
  app.listen(8080, () => {
    console.log("server is running on port 8080");
  });
};
startServer();

控制器代码 #

export const userRegister = async (req, res) => {
   
  console.log(req.body) // => {}

  try {
    const { name, imageProfile, description, password } = req.body;
    //insert user

    res.status(201).json({ success: true, data: user });
  } catch (e) {
    //error
  }
};

客户端代码 #

const Register = () =>{
  const dataForm = new FormData();
  dataForm.append("name", form.name);
  dataForm.append("description", form.description);
  dataForm.append("password", form.password);
  dataForm.append("imageProfile", form.imageProfile);

  UserRegister(dataForm).then(rst)
}

export const UserRegister = async (user) => {
  try {
    const response = await fetch(`${ENDPOINT}/user`, {
      method: "POST",
      body: user,
    });
    return response;
  } catch (error) {
    console.log(error);
  }
};

解决方案 #

问题原因 #

Express默认的body-parser系列中间件（包括express.json()、bodyParser.json()、bodyParser.urlencoded()）仅能解析application/json和application/x-www-form-urlencoded类型的请求体，无法处理FormData发送的multipart/form-data类型请求，因此req.body为空。

解决步骤 #

1. 安装multer中间件：multer是专门处理multipart/form-data的Express中间件，执行命令安装：

   npm install multer
   

2. 修改服务器配置：替换原有body-parser配置，改用multer处理请求：

   import express from "express";
   import multer from "multer";
   
   // 配置multer存储方式，这里用内存存储（文件暂存内存），也可配置磁盘存储
   const storage = multer.memoryStorage();
   const upload = multer({ storage: storage });
   
   app.use(express.json()); // 保留JSON解析，不影响其他接口
   
   // 在注册接口路由上应用multer，指定需要解析的字段
   app.post('/user', upload.fields([
     { name: 'name', maxCount: 1 },
     { name: 'description', maxCount: 1 },
     { name: 'password', maxCount: 1 },
     { name: 'imageProfile', maxCount: 1 }
   ]), userRegister);
   
   const startServer = () => {
     app.listen(8080, () => {
       console.log("server is running on port 8080");
     });
   };
   startServer();
   

3. 更新控制器代码：普通字段从req.body获取，文件字段从req.files获取：

   export const userRegister = async (req, res) => {
     console.log(req.body); // 可获取name、description、password
     console.log(req.files.imageProfile); // imageProfile文件信息，为数组格式
   
     try {
       const { name, description, password } = req.body;
       // 取出文件对象，包含buffer、originalname、size等属性
       const imageFile = req.files.imageProfile[0];
   
       // 编写插入用户的逻辑，比如保存文件到磁盘或数据库
       const user = { name, description, password, imageName: imageFile.originalname };
   
       res.status(201).json({ success: true, data: user });
     } catch (e) {
       res.status(500).json({ success: false, error: e.message });
     }
   };
   

4. 客户端无需修改：当fetch的body为FormData时，浏览器会自动设置正确的Content-Type请求头，无需手动添加。

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