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 相关文章推荐
jquery tools 系列 scrollable(2)
Sep 06 Javascript
基于jquery的finkyUI插件与Ajax实现页面数据加载功能
Dec 03 Javascript
js动态添加事件并可传参数示例代码
Oct 21 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
Oct 23 Javascript
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
Nov 23 Javascript
JS Array.slice 截取数组的实现方法
Jan 02 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
May 18 Javascript
Angular 常用指令实例总结整理
Dec 13 Javascript
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
Mar 06 Javascript
jQuery实现模糊查询的方法分析
May 10 jQuery
Bootstrap Table 双击、单击行获取该行及全表内容
Aug 31 Javascript
Node.js API详解之 timer模块用法实例分析
May 07 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
如何让搜索引擎抓取AJAX内容解决方案
2014/08/25 PHP
php+ajax实时输入自动搜索匹配的方法
2014/12/26 PHP
php实现汉字验证码和算式验证码的方法
2015/03/07 PHP
脚本之家贴图转换+转贴工具用到的js代码超级推荐
2007/04/05 Javascript
选择器中含有空格在使用示例及注意事项
2013/07/31 Javascript
JavaScript解析URL参数示例代码
2013/08/12 Javascript
jQuery进行组件开发完整实例
2015/12/15 Javascript
详解AngularJS 模态对话框
2016/04/07 Javascript
JS实现关闭当前页而不弹出提示框的方法
2016/06/22 Javascript
Node.js的文件权限及读写flag详解
2016/10/11 Javascript
AngularJS实现表单验证功能
2017/01/09 Javascript
js获取json中key所对应的value值的简单方法
2020/06/17 Javascript
vue.js利用Object.defineProperty实现双向绑定
2017/03/09 Javascript
JS表单提交验证、input(type=number) 去三角 刷新验证码
2017/06/21 Javascript
AngularJS中控制器函数的定义与使用方法示例
2017/10/10 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
2017/11/24 Javascript
基于Swiper实现移动端页面图片轮播效果
2017/12/28 Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
2018/05/16 Javascript
[02:51]2014DOTA2 TI小组赛总结中国军团全部进军钥匙球馆
2014/07/15 DOTA
介绍Python中几个常用的类方法
2015/04/08 Python
对numpy中轴与维度的理解
2018/04/18 Python
Python tkinter label 更新方法
2018/10/11 Python
pandas实现to_sql将DataFrame保存到数据库中
2019/07/03 Python
python实现各种插值法(数值分析)
2019/07/30 Python
Python join()函数原理及使用方法
2020/11/14 Python
css3进行截取替代js的substring
2013/09/02 HTML / CSS
使用phonegap查找联系人的实现方法
2017/03/31 HTML / CSS
味多美官网:蛋糕订购,100%使用天然奶油
2017/11/10 全球购物
世界领先的26岁以下学生和青少年旅行预订网站:StudentUniverse
2018/07/01 全球购物
用友笔试题目
2016/10/25 面试题
幼儿园中秋节活动方案2013
2014/01/29 职场文书
2014年个人工作总结模板
2014/12/15 职场文书
2015年八一建军节慰问信
2015/03/23 职场文书
不同意离婚代理词
2015/05/23 职场文书
python+opencv实现视频抽帧示例代码
2021/06/11 Python
详解Python类和对象内容
2021/06/22 Python