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 相关文章推荐
轻轻松松学习JavaScript
Feb 25 Javascript
js判断上传文件的类型和大小示例代码
Oct 18 Javascript
jquery给图片添加鼠标经过时的边框效果
Nov 12 Javascript
JavaScript判断undefined类型的正确方法
Jun 30 Javascript
通过点击jqgrid表格弹出需要的表格数据
Dec 02 Javascript
利用Vue.js指令实现全选功能
Sep 08 Javascript
jQuery实现鼠标跟随效果
Feb 20 Javascript
Angular4学习笔记之新建项目的方法
Jul 18 Javascript
vue封装一个简单的div框选时间的组件的方法
Jan 06 Javascript
js设计模式之代理模式及订阅发布模式实例详解
Aug 15 Javascript
优化Vue中date format的性能详解
Jan 13 Javascript
JavaScript中遍历的十种方法总结
Dec 15 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
PHP函数实现从一个文本字符串中提取关键字的方法
2015/07/01 PHP
php 生成加密公钥加密私钥实例详解
2017/06/16 PHP
防止页面被iframe(兼容IE,Firefox火狐)
2010/07/04 Javascript
浅谈JavaScript 框架分类
2014/11/10 Javascript
javascript+ajax实现产品页面加载信息
2015/07/09 Javascript
微信小程序 Tab页切换更新数据
2017/01/05 Javascript
javaScript基础详解
2017/01/19 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
2017/03/25 jQuery
node.js中express中间件body-parser的介绍与用法详解
2017/05/23 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
2017/11/09 Javascript
vue服务端渲染缓存应用详解
2018/09/12 Javascript
使用jquery模拟a标签的click事件无法实现跳转的解决
2018/12/04 jQuery
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
2019/01/29 Javascript
vue element upload组件 file-list的动态绑定实现
2019/10/11 Javascript
[01:16]2014DOTA2 TI专访C9战队EE:中国五强中会占三席
2014/07/10 DOTA
[51:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python列表list数组array用法实例解析
2014/10/28 Python
Python中几个比较常见的名词解释
2015/07/04 Python
python中kmeans聚类实现代码
2018/02/23 Python
用Python实现数据的透视表的方法
2018/11/16 Python
python实现推箱子游戏
2020/03/25 Python
使用coverage统计python web项目代码覆盖率的方法详解
2019/08/05 Python
python实现提取str字符串/json中多级目录下的某个值
2020/02/27 Python
tensorflow安装成功import tensorflow 出现问题
2020/04/16 Python
Python使用tkinter实现小时钟效果
2021/02/22 Python
HTML5 canvas基本绘图之绘制阴影效果
2016/06/27 HTML / CSS
HTML5的标签的代码的简单介绍 HTML5标签的简介
2012/05/28 HTML / CSS
解析HTML5的存储功能和web SQL的相关操作方法
2016/02/19 HTML / CSS
amazeui树节点自动展开折叠面板并选中第一个树节点的实现
2020/08/24 HTML / CSS
中间件的定义
2016/08/09 面试题
室内设计实习自我鉴定
2013/09/25 职场文书
采购部主管岗位职责
2014/01/01 职场文书
护士求职信
2014/07/05 职场文书
趣味运动会广播稿
2015/08/19 职场文书
《多彩的民间艺术》教学反思
2016/02/16 职场文书
MySQL之select、distinct、limit的使用
2021/11/11 MySQL