Node.js从请求体获取空对象：Fetch API提交表单失败排查

相关代码 #

HTML表单 #

<form id="my-form" method="post" action="/" enctype="multipart/form-data">
    <input type="text" name="name" id="ok">
    <input type="text" name="pro" id="okpro">
    <button type="submit"> Submit it </button>
</form>

前端JavaScript提交代码 #

const form = document.getElementById('my-form');

form.onsubmit = async function(e){
    e.preventDefault()

    const formData = new FormData(form)

    for (const it of formData) {
        console.log(it[0], it[1]);
    }

    const response = await fetch('/', {method: 'POST', body: formData})
    const result = await response.json()
    
    console.log(result);
}

注：也尝试过使用form.addEventListener方法，结果无变化

Node.js路由代码 #

route.post("/", (req, res) => {  
    console.log("Our Body", req.body)
    res.status(200).json({
        res: req.body
    }) 
})

问题原因 #

你的表单设置了enctype="multipart/form-data"，而Node.js默认的请求体解析中间件（比如body-parser的urlencoded）仅能处理application/x-www-form-urlencoded和application/json格式的数据，无法解析multipart/form-data类型的请求体，因此后端的req.body会是空对象。

解决方案 #

需要使用专门处理multipart/form-data的中间件multer，步骤如下：

1. 安装multer

npm install multer

2. 修改后端路由代码，引入并配置multer

const multer = require('multer');
// 因为表单没有文件上传，仅需处理文本字段，使用upload.none()即可
const upload = multer();

route.post("/", upload.none(), (req, res) => {  
    console.log("Our Body", req.body);
    res.status(200).json({
        res: req.body
    });
});

补充说明 #

如果表单不需要上传文件，也可以直接去掉HTML表单中的enctype="multipart/form-data"属性，此时表单默认使用application/x-www-form-urlencoded格式，只要后端配置了body-parser的urlencoded中间件：

const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: true }));

就能正常解析req.body。但如果后续需要添加文件上传功能，仍需使用multer处理。

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