Fetch POST with formData 在 Express JS 路由中为空

Question

我有一个使用 fetch() 到 AJAX 的表单，在 NodeJS 上有一个路由。当 AJAX POST 命中路由时，req.body 显示一个空对象 {}。

代码如下：

// 在app.js

app.use(bodyParser.json());

app.use(bodyParser.urlencoded({ extended: true }));

// 在form.js

form.getElementById('form__option').addEventListener('submit', e => {
    e.preventDefault()
    const form = $('form')[0]
    fetch('/polls/create', {
        method: 'POST',
        body: new FormData(form)
    })
})

// 在 appRoute.js

exports.createPost = (req, res, next) => {
    console.log('req body', req.body)
    res.send('NOT IMPLEMENTED: pollsController createPost');
}

Answer 1

这里的问题是 FormData 会将内容类型设置为 multipart/form-data，Express 的 body-parser 无法理解。

注意评论 here:

[body-parser] does not handle multipart bodies, due to their complex and typically large nature. For multipart bodies, you may be interested in the following modules: busboy and connect-busboy; multiparty and connect-multiparty; formidable; multer.

换句话说，您必须使用不同的模块来处理 FormData 发送的多部分正文。我可以推荐 formidable，在这种情况下，您的服务器代码将类似于：

const formidable = require('formidable')

exports.createPost = (req, res, next) => {
    var form = new formidable.IncomingForm();
    form.parse(req, (err, fields, files) => {
        console.log(fields)
        res.send('NOT IMPLEMENTED: pollsController createPost');
    }
}

Fetch POST with formData 在 Express JS 路由中为空

Fetch POST with formData is empty in Express JS route

form-data

fetch

node.js