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

时间:2017-07-01 13:31:50

标签: javascript node.js express form-data body-parser

不知怎的,我的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);

与邮递员相同:

postman

我不明白这一点......

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

4 个答案:

答案 0 :(得分:2)

记录formData

中的每个字段
let myForm = document.getElementById('myForm');
formData = new FormData(myForm);

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

小提琴 - 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);
});

答案 1 :(得分:1)

根据我的理解,问题可能在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);
});

同样,这篇文章比较旧,所以你可能已经修好了。

答案 2 :(得分:0)

body-parser已过时,不再是Express的一部分。

此外,body解析器不提供解析表单数据发布数据的功能。

从主体分析程序存储库description

  

由于其复杂且通常较大的性质,因此无法处理多部分实体。对于多部分实体,您可能对以下模块感兴趣:

答案 3 :(得分:-1)

Express和主体解析器版本:

    public function register()
    {
        $this->app->singleton('Illuminate\Contracts\Routing\ResponseFactory', function ($app) {
            return new \Illuminate\Routing\ResponseFactory(
                $app['Illuminate\Contracts\View\Factory'],
                $app['Illuminate\Routing\Redirector']
            );
        });
    }

app.js:

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

要发送原始数据,请从列表中选择JSON enter image description here