原文 https://blog.csdn.net/charlene0824/article/details/51199292
關於http協議里定義的四種常見數據的post方法，分別是：
application/www-form-ulrencoded
multipart/form-data
application/json
text/xml
Express依賴bodyParser對請求的包體進行解析。默認支持application/json,application/www-form-urlencoded,multipart/form-data.單數對xml沒有支持。需要自己代碼來實現
www-form-urlencoded
http默認的post請求是這種方式，比如寫一個<form>...<input type="submit/></form>.form表單里面的submit按鈕默認就是這種www-form-urlencoded方式提交的
node.js下使用Express接收這種提交方式需要使用body-parse插件支持，Express和body-parser的依賴關系在4.0以下版本和4.0以上版本是不同的
var express=require("express);
var bodyParser=require('body-parser');
var app=express();
var server=require('http').createServer(app);
app.use(bodyParser.urlencoded({extended:true}));
var PORT=process.env.PORT||3008;
server.listen(PORT);
1
2
3
4
5
6
7
8
9
10
該代碼搭建起了一個簡單的server，在git bash中輸入
$node app
1
運行起來，就可以接收post的www-form-urlencoded類型的參數
我們在上面的代碼中加上一個路由（該路由需要放在監聽端口的前面）
app.post('/urlencode',function(req,res){
console.log(req.body);
res.send("success");
});
1
2
3
4
在html中編寫form表單，使用post方法發送請求
<form action='/urlencode' method='post'>
<input type='text' name='user' value='charlene'/>
<input type='submit'>
</form>
1
2
3
4
當提交表單時，路由中的req.body取得請求信息，並通過res.send方法將響應信息發送給客戶端
form-data
該數據類型也是常見的提交數據的方式，和上面不同的是form表單里需要有enctype標識。即我們在上傳文件時，需要愛form標簽中做這樣的標識：
<form enctype="multipart/form-data"></form>
如果是通過ajax方法提交表單，可以XHR2的FormData方法提交處理上傳文件的表單。例如表單中含有上傳的文件和其他需要提交的字段
`<form method="post" id="form-article">
<label>文章標題：</label>
<input type="text" name="title" placeholder="請輸入標題" class="text-input"></input>
<label>文章封面：</label><input type="file" name="postImg" value="上傳圖片" id="upload">
<input type="submit" >
</form>`
1
2
3
4
5
6
以上的form表單中，含有需要提交的文章標題字段和文章封面的圖像上傳。當使用ajax實現表單提交時，需要使用xhr2中的FormData類型。
在下面的代碼中，result為將表單提交的字段序列化的結果，為一個key=value形式的字符串。
var upload=document.getElementById("upload");
var formD=new FormData();
for(var i = 0; i < result.length; i++){
var val = result[i].split("=");
formD.append(val[0],val[1]);
}
//如果上傳上傳的圖片不為空，取出上傳的圖片內容
if(upload.files[0]){
formD.append("file",upload.files[0]);
}
ajax("post","/upload1",null,formD,function(res){
console.log(res);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
ajax為自己封裝的ajax發送請求的方法，想了解此方法 見附錄
使用nodejs處理form-data數據，需要引入中間件multer或connect-multiparty，這里我使用multer中間件 關於multer中間件的安裝及相關方法及屬性，請參見我的上一篇博客
在路由文下，編寫form表單請求路由時處理的功能
var upload=require('multerUtil');
app.post('/upload1',upload.single("file"),function(req,res){
console.log(req.body);//req.body中存放一般字段中存在的字段值
//將信息存入文章數據庫
console.log(req.file);//req.file中存放上傳的文件信息
var post = new Post("cheng", req.body.title, req.body.tags,req.body.post,req.body.cates,req.file.path);
post.save(function (err) {
console.log(post);
if (err) {
console.log("error");
}
res.send({
user: "cheng",
title: req.body.title,
tags: req.body.tags,
post: req.body.post,
cates: req.body.cates
});
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
});
*注：multerUtil為引入multer中間件，並設置中間件的storage后返回的中間件，設置方法請參照我的上一篇博客
application/json
bodyParser支持此類參數的解析。不過如果需要發送json數據，需要對發送請求的請求頭設置，如果是ajax上傳，設置請求頭方法如下
xhr.setRequestHeader=("Content-Type":"application/json");
1
同時，請求信息的格式需要是json字符串格式，如果是json格式，需要通過JSON.stringify()方法將json格式的數據轉化為json字符串格式的數據進行傳輸，后台node.js 在相應的路由下通過req.body接收請求的信息。
text/xml
這種請求類型不是特別常見，body-parse默認也不解析這種數據格式，目前騰訊、微信在使用這種數據交換格式，node.js中只能自己編寫代碼處理，把請求體參數按照字符串讀取出來，然后使用xml2json包吧字符串解析成json對象。
首先還是使用body-parse得到字符串，然后再轉化
xml格式請求需要指定http請求頭content-type=text/xml
利用req上定義的事件data來獲取http請求流，end事件結束請求流的處理
利用xml2json把上面得到的請求參數流轉化為json對象
首先需要安裝xml2json
$npm install xml2json
var xml2json=require('xml2json');
app.post('/xml',function(req,res){
req.rawBody='';
var json={};
req.setEncoding('utf8');
req.on('data',function(req,res){
req.rawBody+=chunk;
});
req.on('end',funciton(){
json=xml2json.toJson(req.rawBody);
res.send(JSON.stringify(json));
});
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
參考文獻：node.js下依賴Express實現post 4中方式提交參數
附錄：ajax封裝的方法
//創建xhr對象
function createXHR(){
if(typeof XMLHttpRequest!="undefined"){
return new XMLHttpRequest();
}else if(typeof ActiveXObject!="undefined"){
if(typeof arguments.callee.activeXString!="string"){
var versions=[
"MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"
],
i,len;
for ( i = 0,len=versions.length; i < len; i++) {
try{
new ActiveXObject(versions[i]);
arguments.callee.activeXString=versions[i];
break;
}catch(ex){
}
}
}
return new ActiveXObject(arguments.callee.activeXString);
}else{
throw new Error("no XHR Object available");
}
}
/**
* ajax請求的方法
* @param {string} met 發送請求的類型 值為'post'或‘get’等ajax能接受的請求類型
* @param {string} url 請求的url
* @param {string/json/formdata} mes 發送請求時的請求信息
* @param {Function} callback 請求成功之后需要調用的回調函數
* @return 處理請求后的結果
*/
var ajax=function(met,url,mes,callback){
var xhr=createXHR();
xhr.onreadystatechange=function(){
if(xhr.readyState==1){
console.log("writing");
}
if (xhr.readyState==4) {
if (xhr.status>=200&&xhr.status<300||xhr.status==304) {
callback(xhr.responseText);
}else{
console.log("request was unsuccessful:"+xhr.status);
}
}
}
xhr.open(met,url,true);
xhr.send(mes);
}