Express后端接收POST请求时获取空FormData的原因排查

原因 #

Express默认的express.json()和express.urlencoded()中间件仅支持解析JSON、urlencoded格式的请求体，无法处理multipart/form-data类型的请求——而你通过FormData发送的请求正是这种类型，所以req.body会返回空对象。

解决方案 #

需要使用multer中间件来解析multipart/form-data请求，步骤如下：

1. 安装multer依赖

npm install multer

2. 修改后端Express代码，配置multer并处理请求

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

// 配置存储方式：这里用内存存储，也可设置磁盘存储路径
const storage = multer.memoryStorage();
const upload = multer({ storage: storage });

// 用upload.single('file')解析名为'file'的单个文件字段，文本字段会自动存入req.body
app.post('/upload', upload.single('file'), (req, res) => {
    console.log(req.body.filename); // 输出'myFile'
    console.log(req.file); // 包含文件的详细信息（如原始文件名、大小、缓冲区等）
    res.status(200).send('上传成功');
});

额外注意 #

你的前端fetch代码存在语法错误，缺少闭合的括号，修正后如下：

const file = fileUpload.files[0];
const formData = new FormData();
formData.append('filename', 'myFile');
formData.append('file', file);
await fetch('http://localhost:8500/upload', {
    method: 'POST',
    body: formData
}); // 补上闭合括号

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