浅谈Express.js解析Post数据类型的正确姿势

var reqParam = "name=jack";
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send(reqParam);

app.post('/urlencoded', bodyParser.urlencoded({extend:true}), function (req, res) {  
 var result = {
   name: req.body.name,    
   sex: '男',    
   age: 15  
 };  
 res.send(result);
});

var reqParam = new FormData(document.form2);
xhr.send(reqParam);

npm install formidable --save

app.post('/formData1', function (req, res) {  
  var form = new formidable.IncomingForm();  
  form.uploadDir = "upload/";  
  form.parse(req, function (err, fields, files) {    
   var obj = {};    
   Object.keys(fields).forEach(function (name) { 
     obj[name] = fields[name];    
   });    
   Object.keys(files).forEach(function (name) {      
     if (files[name] && files[name].name) {        
       obj[name] = files[name];        
       fs.renameSync(files[name].path, form.uploadDir + files[name].name);     
    }    
   });   
   res.send(obj);  
  });
});

npm install multiparty--save

app.post('/formData2', function (req, res) {  
 // 解析一个文件上传  
var form = new multiparty.Form();  
//设置编辑  
form.encoding = 'utf-8';  
//设置文件存储路径  
form.uploadDir = "upload/";  
 //设置单文件大小限制  
form.maxFilesSize = 2000 * 1024 * 1024;  
form.parse(req, function (err, fields, files) {    
   var obj = {};    
   Object.keys(fields).forEach(function (name) {      
     obj[name] = fields[name];    
   });    
   Object.keys(files).forEach(function (name) {      
     if (files[name] && files[name][0] && files[name][0].originalFilename) {        
       obj[name] = files[name];        
       fs.renameSync(files[name][0].path, form.uploadDir + files[name][0].originalFilename); 
     }    
   });    
   res.send(obj);  
  });
});

var reqParam = {  
   name: 'jack'
};
xhr.setRequestHeader('Content-type', 'application/json');
xhr.send(JSON.stringify(reqParam));

app.post('/applicationJson', bodyParser.json(), function (req, res) {  
var result = {    
  name: req.body.name,    
  sex: '男',    
  age: 15  
 };  
  res.send(result);
});

var text = '<"1.0""htmlcode">

app.post('/textXml', bodyParser.urlencoded({extend:true}), function (req, res) {  
  var result = ''; 
  req.on('data', function (chunk) {    
  result += chunk;  
  });  
  req.on('end', function () {    
  res.send(result);  
  });
});


4.3、浏览器请求 / 响应截图
请求：

响应：

三、踩坑汇总
1、对于跨域请求，当 contentType 改为 application/json ，将触发浏览器发送一个预检 OPTIONS 请求到服务器，再发送正常的 post 请求；
2、使用 new FormData() ，然后设置 Content-type 为 application/x-www-form-urlencoded 或者 multipart/form-data 会导致后端无法正常解析，解决方法：就是不进行头部设置， Content-type 会默认 为 multipart/form-data ，服务端正常解析；
3、 contentType 设置为 application/x-www-form-urlencoded 时，传给后端的请求参数为 JSON 字符串， chrome 调试框查看发送的请求参数多了冒号，如下所示：

这是因为 application/x-www-form-urlencoded 它将被解析成键值对展示，但是字符串进去是没有改变的，但是展示的时候能看见。解决方法：如果为 JSON 字符串，则设置数据类型为 application/json ；
四、总结
本文我们主要介绍 Post 请求的 4 种 Content-Type 数据类型，以及如何使用 Express 来对每种 Content-Type 类型进行解析。已经将完整的代码实例上传到 github ， github 地址为：https://github.com/fengshi123/request_example，欢迎 star 。 demo 截图如下所示：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。