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();
});

我的要求是{}

我在哪里他妈的？

这是工作代码，由@Quentin，前端提供

function http(data) {

   const httpData = new FormData();
    for (let prop in data) {
        httpData.append(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.send(httpData);
}

和/routes/api.js中的后端

const formidable = require('formidable');
router.post('/login', (req, res, next) => {

    const form = formidable({ multiples: true });
    form.parse(req, (err, fields, files) => {
        
        console.log(fields);
        res.end();
    });
});

Answer 1

您遇到三个问题。

append() 有效。它只是不会以console.log显示的方式存储数据。分配任意属性不起作用。
您需要发送正确 Content-Type标头。这是multipart/form-data，带有您无法知道的强制 boundary参数。 不要尝试手动设置Content-Type标头。 XMLHttpRequest将从FormData对象自动生成它。
您需要支持multipart/form-data的Express主体解析器。内置的没有。 documentation for it on npm建议了4种选择。

使用AJAX将FormData发送到Node.js + Express服务器

1 个答案: