使用AJAX发送FormData到nodejs+express服务器

Question

这是我的前端 JS。附带说明一下，FormData.append() 不起作用，因此我必须显式设置其属性。

@data

是一个具有输入名称：值属性的对象。

function http(data) {
 
   const httpData = new FormData();
    for (let prop in data) {
        httpData[prop] = data[prop];
    }
    const xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {

        if (this.readyState === 4) {
            const status = this.status;
            const data = this.responseText;

        }
    };
    xhttp.open('POST', '/api/login');
    xhttp.setRequestHeader('Content-Type', 'x-www-form-urlencoded');
    xhttp.send(httpData);
}

在服务器端

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

express 准备解析表单数据，并在

/routes/api.js

（我正在使用express router）

router.post('/login', (req, res, next) => {

    console.log(req.body);
    res.end();
});

我得到

req.body

作为

{}

我哪里做错了？

Answer 1

你有三个问题。

1. append()

   确实有效。它只是不以

   console.log

   显示的方式存储数据。分配任意属性不起作用。
2. 您需要发送 Correct

   Content-Type

   标头。这是

   multipart/form-data

   和一个你无法知道的 mandatory

   boundary

   参数。 不要尝试手动设置

   Content-Type

   标题。

   XMLHttpRequest

   将从 FormData 对象自动生成它。
3. 您需要一个支持

   multipart/form-data

   的 Express 主体解析器。内置的则没有。 npm 上的文档建议了 4 种替代方案。