使用Express与fetch发送Post数据时无法接收请求体的问题

问题原因 #

Express默认不具备解析multipart/form-data类型请求的能力，而你通过fetch发送的FormData恰好属于这类请求，因此服务器无法解析req.body，导致输出为空对象。

解决方案 #

使用multer中间件处理multipart/form-data请求，具体步骤如下：

1. 安装multer
   在项目目录下执行命令：

npm install multer

2. 配置并启用multer中间件
   修改服务器端代码，引入并配置multer：

const express = require('express');
const multer = require('multer');
const app = express();

// 配置multer，仅处理文本字段，使用内存存储即可
const upload = multer({ storage: multer.memoryStorage() });

// 在路由中添加upload.none()中间件，解析FormData中的文本字段
app.post('/api', upload.none(), (req, res) => {
  console.log(req.body); // 输出 { key: '你的API_KEY', fileId: '57' }
  console.log(req.body.key); // 正常输出你的API_KEY
  res.status(200).json({ status: 'success' });
});

app.listen(3001, () => {
  console.log('Server running on port 3001');
});

代码说明 #

• multer({ storage: multer.memoryStorage() })：由于你仅发送文本字段，无需处理文件上传，因此使用内存存储避免磁盘写入操作。
• upload.none()：指定只解析FormData中的文本字段，解析后的字段会被自动挂载到req.body中。

完成上述修改后，服务器即可正常接收并解析你发送的FormData数据。

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