将表单类型更改为 multipart/form-data 会导致 req.body 为空

Question

当我在没有指定enctype 的情况下设置表单时，Firefox 会自动将其设置为application/x-www-form-urlencoded 并且req.body 包含输入到表单中的所有参数的漂亮JSON 表示。但是当我把enctype改成multipart/form-data时req.body突然就空了。

这是我的表格：

<form action="/create" method="post" enctype="multipart/form-data">
  <fieldset>
    <div>
      <label>Category:</label>
    </div>
    <div>
      <select name="category">
      <option value="standard">Standard</option>
      <option value="custom">Custom</option>
    </div>
    <div>
      <input type="text" name="description">
    </div>
    <div>
      <label>User ID:</label>
    </div>
    <div>
      <input type="text" name="userid">
    </div>
    <div>
      <input type="submit" value="Go">
    </div>
  </fieldset>
</form>

当enctype 为multipart/form-data 并且未指定enctype 时，执行console.log(JSON.stringify(req.body, null, 2)); 会打印出一个空对象，它会打印出如下内容：

{
  category: "standard",
  userid: "foo"
}

发生这种情况有什么原因吗？

Answer 1

尝试使用 busboy-body-parser 检索请求正文参数和文件。

start.js
var bodyParser = require('body-parser');
var busboyBodyParser = require('busboy-body-parser');


// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({
  extended: true
}));

// parse application/json
app.use(bodyParser.json());


//parse multipart/form-data    
app.use(busboyBodyParser());



controllers/someController.js
someAction: function(req,res){
     if(req.method == "POST"){
           res.end(JSON.stringify(req.body)+JSON.stringify(req.files));
     }
}
//{"text":"testx"}{"anexo":{"data":{"type":"Buffer","data":.... }}} 
//req.body = {"text":"testx"}
//req.files = {"anexo":{"data":{"type":"Buffer","data":.... }}} 


views/someController/someAction.html
<form method="post" id="multipart" enctype="multipart/form-data">
    <input type="text" id="text1" name="text" value="testx" />
    <input type="file" id="anexo" name="anexo"  />
    <input type="submit" value="Enviar" />
</form>

要创建一个上传的文件，你需要工作如果流，例如：

/* file props
{  
   "data":{"type":"Buffer","data":.... },
   "fieldname":"anexo",
   "originalname":"images (1).jpg",
   "encoding":"7bit",
   "mimetype":"image/jpeg",
   "destination":"c:\\live\\sources\\uploads\\",
   "filename":"eventclock_images (1)_1443706175833.jpg",
   "path":"c:\\live\\sources\\uploads\\eventclock_images(1)_1443706175833.jpg",
   "size":9986
}
*/

var fileStream = fs.createWriteStream(file.path);
fileStream.write(file.data);
fileStream.end();

fileStream.on('error', function (err) {
    //console.log("error",err);
});
fileStream.on('finish', function (res) {
    //console.log("finish",res);
});     

Answer 2

听起来您使用的是express.urlencoded() 而不是express.multipart()。

Answer 3

我认为@robertklep 是正确的，但我不同意他的回答。 express.multipart() 是 deprecated and should not be used。

如果您需要多部分表单处理，我强烈推荐Busboy。如果您想了解所有详细信息，请参阅this answer。

Answer 4

npm install multer --save

in main.js

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

router.route("/quotes").post(upload.array(),function(req, res, next){
        name = req.body.name;
        email = req.body.email;
}