前端FormData已赋值但后端接收所有字段为undefined如何解决？

问题原因 #

• Express 内置的 express.json() 和 express.urlencoded() 中间件仅支持解析 application/json 和 x-www-form-urlencoded 格式的请求体，你前端用 FormData 提交的请求格式为 multipart/form-data，这两个中间件不会处理，因此 req.body 为空，解构出来的字段自然都是 undefined。
• 你用 Postman 测试能正常拿到值，大概率是 Postman 里你选择的请求体格式不是 form-data，而是 x-www-form-urlencoded 或者 raw/json，刚好匹配了后端已配置的解析规则。

解决方案 #

方案1：无需上传文件时推荐，直接传JSON格式（更简单） #

前端不需要构造 FormData，直接传普通 JS 对象即可，axios 会自动转换为 JSON 格式，后端不需要额外修改配置：

const addGroup = () => {
  const token = Cookies.get("X-API-KEY");
  const data = {
    firstlead: "Is Me",
    secondlead: "Is You",
    name: "Our Group"
  };
  axios
    .post(
      `http://localhost:7000/api/v1/groups`,data,
      {
        headers: { authorization: token },
      }
    )
    .then(() => {
      notify();
    });
};

方案2：需要上传文件时，后端新增multipart解析中间件 #

如果你的场景后续需要上传文件，必须用 FormData，那后端需要安装 multer 中间件来解析 multipart/form-data 格式的请求：

1. 安装依赖

npm install multer

2. 修改接口代码，引入并挂载multer中间件：

const multer = require('multer');
// API POST DATA GROUP (admin)
// 无文件上传时使用 multer().none()，仅解析普通文本字段
router.post('/',authAdminMiddleware, multer().none(), async (req, res) => {
const {
    firstlead,
    secondlead,
    name
} = req.body;
try {
    console.log(firstlead)
    console.log(secondlead)
    console.log(name)
} catch (error) {
    console.log(error);
    return res.status(500).json({code:500,status:false,message:'Server Error'});
}
})

注：前端代码不需要修改，axios 会自动识别 FormData 实例并添加正确的 Content-Type 请求头，不要手动添加 Content-Type: multipart/form-data，否则会丢失 boundary 边界参数导致解析失败。

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