带有 formdata 的 Express body-parser req.body 是空对象

Question

不知何故我的 req.body 总是空的，也许你有一个想法：

这是我的服务器代码：

const Express = require('express');
const bodyParser = require('body-parser');

const app = new Express();
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

app.post('/save', (req, res) => {
  console.log(req.body)  // => {}
  res.send(req.body);
});

const env = process.env.NODE_ENV || 'production';
app.listen(3000, err => {
   if (err) { return console.error(err); }
   console.info(`Server running on http://localhost:${port} [${env}]`);
});

当我尝试使用 javascript 发送 formdata 时，req.body 为空：

const data = new FormData(document.querySelector('form'));
console.log(data);  // seems empty already??? FormData{}??
const xhr = new XMLHttpRequest();
xhr.open('POST', 'http://localhost:3000/save');
xhr.send(data);

与邮递员相同：

我不明白这个…

x-www-form-urlencoded与邮递员一起发送或raw (application/json)在邮递员工作。但是在 javascript 中使用 Formdata 发送相同的标头仍然会导致一个空对象......

Answer 1

记录 formData 中的每个字段

let myForm = document.getElementById('myForm');
formData = new FormData(myForm);

for (let [key, value] of formData.entries()) { 
  console.log(key, value);
}

小提琴 - https://jsfiddle.net/thesmit67/j4znhxa5/1/

要通过 express 处理它，请使用multer。这是一个例子 - https://www.npmjs.com/package/multer

确保添加enctype="multipart/form-data"表单元素。否则 Multer 将忽略它。

let multer = require('multer');
let upload = multer();

app.post('/save', upload.fields([]), (req, res) => {
  console.log( req.body );
  console.log( req.files );
  res.sendStatus(200);
});

Answer 2

body-parser 已被弃用，不再是 Express 的一部分。

此外，body-parser 不提供解析表单数据发布数据的功能。

来自 body-parser 存储库描述：

由于其复杂且通常较大的性质，这不能处理多部分实体。对于多部分主体，您可能对以下模块感兴趣：

• busboy和 connect-busboy
• 多方和 多方连接
• 强大
• 多路