將表單類型更改爲多部分/表單數據會導致請求人爲空

當我在未指定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>

做一個console.log(JSON.stringify(req.body, null, 2));打印出一個空的對象時enctype是multipart/form-data當沒有指定enctype時，它打印出像：

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

任何理由這是怎麼回事？

來源

2014-01-08 A. Duff

聽起來像你使用express.urlencoded()而不是express.multipart()。

來源

2014-01-08 17:22:24 robertklep

感謝。我是Express的新手，剛剛使用標準設置。沒有意識到這是需要在app.js –

@robertklep中改變的東西，你可能是正確的（不能確定沒有看到OPs Express代碼），而是'express.multipart'（真正的Connect中間件）已棄用，不應使用。看到我的答案替代品。 –

@EthanBrown我並不完全不同意你的看法，但是國際海事組織，如果有東西被棄用，它應該被刪除。只要它仍然可用，我會使用它。順便說一句，與[unstable notices]（http://nodejs.org/api/stream.html#stream_stream）類似。 – robertklep

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

如果您需要多部分表格處理，我強烈建議Busboy。如果您想了解所有的細節，請參閱this answer。

來源

2014-01-08 20:20:48

http://stackoverflow.com/questions/19581146/how-to-get-rid-of-connect-3-0-deprecation-alert - 您可以解決棄用通知，這將在Express使用Connect 3.0時得到解決。 – brandonscript

這個答案正是我推薦的海報。如果您閱讀我引用的答案，它將包含所有的細節。但是：爲避免棄用通知，明確使用'json'和'urlencoded'而不是'bodyParser'是結果。具體而言，我說*不要*使用'multipart'，這已被棄用，並且成爲OP的答案的核心。 –

OH！所以你沒有看到。好東西。 – brandonscript

嘗試使用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); 
});

來源

2015-10-01 12:31:25

你不應該回答你的情況。考慮提問者的情況。 –

-1

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

來源

2017-03-15 10:17:33 vipinlalrv

包含一些解釋你的代碼的做法總是一個好主意。 –

將表單類型更改爲多部分/表單數據會導致請求人爲空

回答

相關問題