Express body-parser req.body with formdata is empty object

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 发送表单数据时，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);

与邮递员相同：

我不明白这个……

用 postman 发送 x-www-form-urlencoded 或 raw (application/json) 在 postman 中工作。但是在 javascript 中使用 Formdata 发送相同的 headers 仍然会导致空 object…

Answer 1

记录 formData 中的每个字段

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

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

Fiddle - https://jsfiddle.net/thesumit67/j4znhxa5/1/

通过快速使用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

据我了解，问题可能出在HTML形式上。

<form action="" method="POST">
 <input type="text" name="foo[bar]">
 <button>Submit</button>
</form>

然后在服务器代码中它可能看起来像这样。

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

同样，这个 post 比较旧，所以您可能已经修复了它。

Answer 3

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

此外，body-parser 不提供解析 form-data post 数据的功能。

来自 body-parser 存储库 description:

This does not handle multipart bodies, due to their complex and typically large nature. For multipart bodies, you may be interested in the following modules:

Answer 4

Express 和正文解析器版本：

"dependencies": {
    "body-parser": "^1.19.0",
    "express": "^4.17.1"
  }

app.js:

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

const app = express();

app.use(bodyParser.urlencoded({     // to support URL-encoded bodies
  extended: true
})); 
app.use( bodyParser.json()); 

const baseUrl = '/api/v1/tours';
app.post(baseUrl, (req, res)=>{
    console.log(req.body);
    res.send('Done');
})
//starting server
const port = 3000;
app.listen(port, ()=>{
    console.log(`app running on port ${port}...`);
});

要发送原始数据，请从列表中 select JSON

Answer 5

我遇到了同样的问题，我正在使用提取 api，将表单数据发送到节点。js/express 后端。问题是我在表单上设置了 enctype='multipart/form-data'，并且还在获取 Headers 中设置了 Content-type: multipart/form-data。从 Headers 中删除 Content-type 让一切正常。我从这里得到了解决方案 => https://github.com/expressjs/multer/issues/411

Answer 6

如果你使用的是formdata，你应该在后端配置Multer。我遇到了同样的问题，我通过配置 Multer

解决了它

Express body-parser req.body with formdata is empty object

Express body-parser req.body with formdata is empty object

javascript

form-data

node.js

express

body-parser