Express 的 body-parser 中间件处理 FormData 的 POST 表单数据，req.body 接收不到数据

问题

在使用 node 的过程中，express 框架是必不可少的。之前表单提交数据使用的是 submit 按钮，使用 express 的中间件 body-parser 来处理，在 req.body 中可以拿到表单传来的值。

但是今天在使用 ajax 发送数据时，使用了 XMLHttpRequest 2.0 提供的 FormData 来提交表单数据，出现了 req.body 一直是个空对象的情况，具体代码如下：

前端JS代码：

$('.addBtn').click(function () {
    let fd = new FormData($('.form')[0])
    $.ajax({
        url: '/add',
        type: 'POST',
        contentType: false,
        processData: false,
        data: fd,
        success: function (res) {
            console.log(res)
        }
    })
})

contentType: false

这一项必须设置为 false，否则 jQuery 会默认将 contentType 设为 application/x-www-form-urlencoded，导致后端拿不到数据，因为 FormData 默认的数据类型是 multipart/form-data，我在网上查这个问题的相关资料时，有些文档竟然写着将 contentType 的类型改为 application/x-www-form-urlencoded 可以解决问题（白眼）

processData: false

这一项也是，不需要 jQuery 帮我们做数据处理，否则也会导致后端拿不到数据

后端代码：

router.post('/add', (req, res) => {
    console.log(req.body) //{}
})

原因

后来通过查阅资料才知道 body-parser 并不支持 contentType: multipart/form-data 的格式类型，也就是不支持 formData 格式

使用 connect-multiparty 第三方模块解决

具体步骤如下：

安装

npm i connect-multiparty -S 

引用

const multipart = require('connect-multiparty')
const multipartyMiddleware = multipart()

使用

router.post('/add', multipartyMiddleware, (req, res) => {
    console.log(req.body) //{ name: '白雪公主', husband: '王子', age: '20', gender: '女' }
})

引申

类似的第三方模块还有 multiparty，想要了解的话，可以去查阅一下相关的资料，在这里就不再赘述了。