问题

在使用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 multipartMiddleware = multipart();

使用

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

引申

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