Node.js无法识别Form Data问题求助

前端React代码 #

const formData = new FormData();
formData.append("file", values.file.file);
formData.append("fileName", values.file.fileName);
formData.append("image", values.image);
formData.append("body", values.body);
formData.append("bookId", values.bookId);

axios.put("/api/admin/visuals/" + this.props.match.params.id, formData)
.then((response) => {

后端Node.js代码 #

router.put("/:id", checkAdminAuth, async (req, res) => {
    const id = req.params.id;
    let upload = null;
    let input = req.body;

    if (id > 0) {
        try {
            console.dir(req.body);

            if (req.body.file) {
                upload = await Common.uploadMedia(req, res);
                input.image = upload;
                console.dir("Uploaded new file");
            }

            await Visuals.update(input, id);

            return res.json({
                status: "ok",
            });
        } catch (error) {
            console.dir(error);
            return res.json({
                status: "error",
            });
        }
    }
});

遇到的问题 #

• req.body 为空
• req.body.file 为空

核心原因 #

Express默认的body-parser中间件无法解析multipart/form-data类型的请求体（也就是前端发送的FormData），导致req.body为空；同时文件字段不会被解析到req.body中，需要专门的中间件处理。

具体解决步骤 #

1. 安装并配置文件解析中间件 #

使用multer处理文件上传，先安装依赖：

npm install multer --save

在路由文件中引入并配置：

const multer = require('multer');
// 示例使用内存存储，可根据需求改为磁盘存储
const storage = multer.memoryStorage();
const upload = multer({ storage: storage });

2. 修改路由处理逻辑 #

• 在路由中添加upload.single('file')中间件，指定解析名为file的单个文件，解析后文件信息会存到req.file
• 非文件字段会自动解析到req.body中
• 将判断条件从req.body.file改为req.file

修改后的路由代码：

router.put("/:id", checkAdminAuth, upload.single('file'), async (req, res) => {
    const id = req.params.id;
    let upload = null;
    let input = req.body;

    if (id > 0) {
        try {
            console.dir(req.body); // 现在能获取非文件字段
            console.dir(req.file); // 文件信息存于此

            if (req.file) {
                upload = await Common.uploadMedia(req, res);
                input.image = upload;
                console.dir("Uploaded new file");
            }

            await Visuals.update(input, id);

            return res.json({
                status: "ok",
            });
        } catch (error) {
            console.dir(error);
            return res.json({
                status: "error",
            });
        }
    }
});

3. 前端请求注意事项 #

不要手动设置Content-Type头，Axios在发送FormData时会自动添加正确的multipart/form-data头及边界标识，手动设置会导致解析失败。

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