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，想要了解的話，能夠去查閱一下相關的資料，在這裏就再也不贅述了。