express的中间件bodyParser详解


Posted in Javascript onDecember 04, 2014

bodyParser用于解析客户端请求的body中的内容,内部使用JSON编码处理,url编码处理以及对于文件的上传处理.

下面是一个文件上传的例子.

建立一个1.html页面

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title>向服务器上传文件</title>

     <script type="text/javascript">        

         function uploadFile(){

             var formData=new FormData();

             var files=document.getElementById("files").files;

             var file=files[0];

             formData.append("myfile",file);

             var xhr=new XMLHttpRequest();

             xhr.open("post","index.html",true);

             xhr.onload= function (e) {

                 if(this.status==200)

                     document.getElementById("result").innerHTML=this.response;

             };

             xhr.send(formData);

         }

     </script>

 </head>

 <body>

 请选择文件:<input type="file" id="files" name="file" />

 <input type="button" value="上传文件" onclick="uploadFile();" />

 <div id="result"></div>

 </body>

 </html>

上面的XMLHttpRequest对象与FormData对象时HTML5中的内容,不作重点讲解.用这两个对象可以将用户选取的文件上传到服务器端,.

在服务器端使用了app.use(express.bodyParser())中间件之后,代表客户端请求的http.IncomingMessage,也就是res对象就具有了一个files属性.

server.js端代码:

 var express=require("express");

 var fs=require("fs");

 var app=express();

 app.use(express.bodyParser());

 app.get("/index.html", function (req,res) {

     res.sendfile(__dirname+"/1.html");

 });

 app.post("/index.html", function (req,res) {

     var file=req.files.myfile;

     fs.readFile(file.path, function (err,data) {

         if(err) res.send("读文件操作失败");

         else{

             fs.writeFile(file.name,data, function (err) {

                 if(err) res.send("写文件操作失败.");

                 else res.send("文件上传成功");

             })

         }

     });

 });

 

 

 app.listen(1337,"127.0.0.1", function () {

     console.log("开始监听");

 });

启动服务器后,运行浏览器:

express的中间件bodyParser详解

选择文件:

express的中间件bodyParser详解

在浏览器端出现了 上传成功字样,

在服务器端也有了我们上传的文件.

express的中间件bodyParser详解

点击上传后:

另外bodyParse可以接受客户端ajax提交的json数据,以及url的处理.

Javascript 相关文章推荐
转换json格式的日期为Javascript对象的函数
Jul 13 Javascript
JS获取浏览器版本及名称实现函数
Apr 02 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
Dec 12 Javascript
使用jQuery加载html页面到指定的div实现方法
Jul 13 Javascript
详解node HTTP请求客户端 - Request
May 05 Javascript
Javascript 编码约定(编码规范)
Mar 11 Javascript
element-ui 时间选择器限制范围的实现(随动)
Jan 09 Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
Apr 11 Javascript
vue+express+jwt持久化登录的方法
Jun 14 Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
Aug 27 Javascript
Node.js中出现未捕获异常的处理方法
Jun 29 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
Aug 18 Javascript
express的中间件basicAuth详解
Dec 04 #Javascript
详解JS函数重载
Dec 04 #Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
Dec 04 #Javascript
javascript常用代码段搜集
Dec 04 #Javascript
5种处理js跨域问题方法汇总
Dec 04 #Javascript
用js读、写、删除Cookie代码续篇
Dec 03 #Javascript
js字符串完全替换函数分享
Dec 03 #Javascript
You might like
PHP4实际应用经验篇(2)
2006/10/09 PHP
完美的2个php检测字符串是否是utf-8编码函数分享
2014/07/28 PHP
PHP中使用正则表达式提取中文实现笔记
2015/01/20 PHP
ThinkPHP中使用Ueditor富文本编辑器
2015/09/02 PHP
postfixadmin忘记密码后的修改密码方法详解
2016/07/20 PHP
php面向对象重点知识分享
2019/09/27 PHP
经验几则 推荐
2006/09/05 Javascript
javascript之querySelector和querySelectorAll使用介绍
2011/12/20 Javascript
Javascript学习笔记之函数篇(六) : 作用域与命名空间
2014/11/23 Javascript
原生js与jQuery实现简单的tab切换特效对比
2015/07/30 Javascript
网页从弹窗页面单选框传值至父页面代码分享
2015/09/29 Javascript
有关jquery与DOM节点操作方法和属性记录
2016/04/15 Javascript
checkbox批量选中,获取选中项的值的简单实例
2016/06/28 Javascript
遍历js中对象的属性和值的实例
2016/11/21 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
2017/09/20 jQuery
vue引入js数字小键盘的实现代码
2018/05/14 Javascript
AngularJS自定义过滤器用法经典实例总结
2018/05/17 Javascript
Vue中JS动画与Velocity.js的结合使用
2019/02/13 Javascript
layer页面跳转,获取html子节点元素的值方法
2019/09/27 Javascript
JS手写一个自定义Promise操作示例
2020/03/16 Javascript
微信小程序canvas动态时钟
2020/10/22 Javascript
[46:12]完美世界DOTA2联赛循环赛 DM vs Matador BO2第一场 11.04
2020/11/04 DOTA
python使用点操作符访问字典(dict)数据的方法
2015/03/16 Python
Python遍历目录并批量更换文件名和目录名的方法
2016/09/19 Python
Python中list的交、并、差集获取方法示例
2019/08/01 Python
pytorch 实现L2和L1正则化regularization的操作
2021/03/03 Python
css3背景图片透明叠加属性cross-fade简介及用法实例
2013/01/08 HTML / CSS
目前不被任何主流浏览器支持的CSS3属性汇总
2014/07/21 HTML / CSS
HTML5引入的新数组TypedArray介绍
2012/12/24 HTML / CSS
英国最大的正宗复古足球衫制造商和零售商:TOFFS
2018/06/21 全球购物
Amara德国:家居饰品、设计师品牌和豪华礼品
2019/05/20 全球购物
VICHY薇姿俄罗斯官方网上商店:法国护肤品牌,火山温泉水
2019/11/22 全球购物
L’Artisan Parfumeur官网:法国香水品牌
2020/08/11 全球购物
护理专业优质毕业生自荐书
2014/01/31 职场文书
加强机关作风建设心得体会
2014/10/22 职场文书
技术入股协议书
2016/03/22 职场文书