浅谈Express.js解析Post数据类型的正确姿势
一、概念介绍
1、POST请求：HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、CONNECT 这几种。其中 POST 一般用来向服务端提交数据。
2、 Content-Type ： 是指 http/https 发送信息至服务器时的内容编码类型， Content-Type 用于表明发送数据流的类型，服务器根据编码类型使用特定的解析方式，获取数据流中的数据。四种常见的 POST 请求的 Content-Type 数据类型：
- application/x-www-form-urlencoded
- multipart/form-data
- application/json
- text/xml
3、 Express.js ： Express 是一个保持最小规模的灵活的 Node.js Web 应用程序开发框架，为 Web 和移动应用程序提供一组强大的功能。
本文我们主要介绍 Post 请求的 4 种 Content-Type 数据类型，以及如何使用 Express 来对每种 Content-Type 类型进行解析。已经将完整的代码实例上传到 github，github 地址为： https://github.com/fengshi123/request_example，欢迎 star 。
二、四种POST请求的Content-Type数据类型解析
1、application/x-www-form-unlencoded
最常见的 POST 提交数据的方式，浏览器的原生 form 表单，如果不设置 enctype 属性，那么最终就会默认以 application/x-www-form-urlencoded 方式提交数据。
1.1、前端请求代码
var reqParam = "name=jack";
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send(reqParam);
1.2、服务端解析代码
app.post('/urlencoded', bodyParser.urlencoded({extend:true}), function (req, res) {
var result = {
name: req.body.name,
sex: '男',
age: 15
};
res.send(result);
});
1.3、浏览器请求 / 响应截图
请求：
响应：
2、multipart/form-data
使用表单上传文件时，必须指定表单的 enctype 属性值为 multipart/form-data . 请求体被分割成多部分，每部分使用 --boundary 分割开始，紧接着内容描述信息，最后是字段具体内容（文本或二进制）；如果传输的是文件，还要包含文件名和文件类型信息；
2.1、前端请求代码
var reqParam = new FormData(document.form2); xhr.send(reqParam);
2.2、服务端解析代码
express 提供了两种插件 formidable 和 multiparty 来处理数据类型为 multipart/form-data 的情况，以下我们分别用两个插件进行处理；
2.2.1、formidable 插件
（1）安装插件
npm install formidable --save
（2）服务端解析处理
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);
});
});
2.2.2、multiparty 插件
（1）安装插件
npm install multiparty--save
（2）服务端解析处理
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);
});
});
2.3、浏览器请求 / 响应截图
请求：
响应：
3、application/json
application/json 这个 Content-Type 作为响应头，用来告诉服务端消息主体是序列化后的 JSON 字符串。由于 JSON 规范的流行，除了低版本 IE 之外的各大浏览器都原生支持 JSON.stringify ，服务端语言也都有处理 JSON 的函数，使用 JSON 不会遇上什么麻烦。
3.1、前端请求代码
var reqParam = {
name: 'jack'
};
xhr.setRequestHeader('Content-type', 'application/json');
xhr.send(JSON.stringify(reqParam));
3.2、服务端解析代码
app.post('/applicationJson', bodyParser.json(), function (req, res) {
var result = {
name: req.body.name,
sex: '男',
age: 15
};
res.send(result);
});
3.3、浏览器请求 / 响应截图
请求：
响应：
4、text/xml
它是一种使用 HTTP 作为传输协议， XML 作为编码方式的远程调用规范,它的使用也很广泛，能很好的支持已有的 XML-RPC 服务。不过， XML 结构还是过于臃肿，一般场景用 JSON 会更灵活方便。
4.1、前端请求代码
var text = '<?xml version="1.0"?><methodCall><methodName>examples.getStateName</methodName>' + '<params><param><value><i4>41</i4></value></param></params></methodCall>';
xhr.setRequestHeader('Content-type', 'text/xml');
xhr.send(text);
4.2、服务端解析代码
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 截图如下所示：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
最近在研究Nodejs开发，俗话说，工欲善其事，必先利其器，当然要找到一款用着顺手的编辑器作为开始。这里我们选择的是Sublime Text 3，除了漂亮的用户界面，最吸引我的就是它的插件扩展功能以及跨平台特性。2015-04-04
前端常见面试题之async/await和promise的区别
async/await是异步代码的新方式,以前的方法有回调函数和Promise,下面这篇文章主要给大家介绍了关于前端常见面试题之async/await和promise区别的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
这篇文章主要介绍了node运行js获得输出的三种方式，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-07-07
node.js Sequelize实现单实例字段或批量自增、自减
Sequelize 可以实现针对单个实例的一或多个字段的自增、自减操作，也可以对符合条件的数据进行批量的自增、自减操作。单个实例字段的自增、自减可以利用Instance的相应方法实现，而批量自增、自减则需要借助sequelize提供的字面量方法实现。下面来看看详细的介绍吧。2016-12-12
torrent文件，又被称为种子，原来只是用于记录 bt下载当中所需信息的一种文件。但是随着互联网的极大发展，一些人士将一些邪恶的信息注入到了小小的 torrent文件当中，种子从此变成了邪恶的代名词。2015-03-03
这篇文章主要介绍了Node.js编写组件的三种实现方式，包括纯js实现、v8 API实现（同步&异步）、借助swig框架实现，感兴趣的小伙伴们可以参考一下2016-02-02
本文将以一个超小型web项目，来详细介绍如何使用NodeJS基础的http, fs, path, url等模块提供的API来搭建一个简单的web服务器。具有很好的参考价值。下面跟着小编一起来看下吧2017-04-04
Node.js和npm为前端生态中提供了统一的开发语言、强大的包管理和模块生态系统、灵活的构建工具和任务自动化、以及丰富的前端框架和库等等,本文给大家介绍了如何预防NodeJS命令注入,文中有详细的代码讲解,需要的朋友可以参考下2023-12-12
Node.js中的HTTP Server对象与GET、POST请求
这篇文章介绍了Node.js中的HTTP Server对象与GET、POST请求，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-07-07
这篇文章主要介绍了Node.js文件系统fs扩展fs-extra说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
最新评论