Angular提交FormData请求，multer解析后req.body为空的问题

我在简易Angular应用中通过FormData发送HTTP POST请求，将请求的Content-Type设置为multipart/form-data，后端使用multer接收并解析该请求，但解析后req.body始终为null。

复现步骤：

• 执行npm install安装依赖
• 进入backend目录执行npm start启动后端
• 进入frontend目录执行npm start启动前端
• 在浏览器打开localhost:4200，页面会自动发送请求到后端，响应结果会直接展示在页面上

当前页面显示结果为{body:null,..}，预期结果应为{body: {content: "test"}}

解决方案 #

1. 前端修正FormData构建方式 #

确保在Angular中正确向FormData实例添加单个字段，而非传入序列化后的对象：

// 正确示例
const formData = new FormData();
formData.append('content', 'test'); // 直接添加键值对

若错误地将整个对象序列化后传入（如formData.append('data', JSON.stringify({content: 'test'}))），multer无法自动解析为req.body的结构。

2. 后端调整multer中间件配置 #

如果仅需接收文本字段（无文件上传），使用multer().none()明确告知multer只解析表单文本字段：

const multer = require('multer');
// 接口路由配置
app.post('/upload', multer().none(), (req, res) => {
  console.log(req.body); // 此时可正常获取{content: 'test'}
  res.json({ body: req.body });
});

若之前使用multer({ dest: 'uploads/' })这类针对文件上传的配置，但实际未上传文件，multer会因等待文件部分而不解析文本字段，导致req.body为空。

3. 移除手动设置的Content-Type请求头 #

Angular的HttpClient在发送FormData时，会自动生成包含正确boundary的multipart/form-data请求头。手动设置该头会丢失boundary信息，导致multer无法正确解析请求：

// 错误写法（需删除）
http.post('/upload', formData, { headers: { 'Content-Type': 'multipart/form-data' } });

// 正确写法
http.post('/upload', formData);

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