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 相关文章推荐
js 获取Listbox选择的值的代码
Apr 15 Javascript
JQuery拖拽元素改变大小尺寸实现代码
Dec 10 Javascript
比较不错的JS/JQuery显示或隐藏文本的方法
Feb 13 Javascript
JQ实现新浪游戏首页幻灯片
Jul 29 Javascript
jquery中用函数来设置css样式
Dec 22 Javascript
基于jQuery实现顶部导航栏功能
Dec 27 Javascript
全面解析Node.js 8 重要功能和修复
Jun 02 Javascript
完美解决axios跨域请求出错的问题
Feb 05 Javascript
解决Layui数据表格中checkbox位置不居中的方法
Aug 15 Javascript
vue移动端模态框(可传参)的实现
Nov 20 Javascript
uni-app实现获取验证码倒计时功能
Nov 01 Javascript
javascript this指向相关问题及改变方法
Nov 19 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
特详细的PHPMYADMIN简明安装教程
2008/08/01 PHP
PHP集成FCK的函数代码
2008/09/27 PHP
header中Content-Disposition的作用与使用方法
2012/06/13 PHP
javascript五图轮播切换实用版
2012/08/17 Javascript
js open() 与showModalDialog()方法使用介绍
2013/09/10 Javascript
通过length属性判断jquery对象是否存在
2013/10/18 Javascript
jquery form 隐藏的input 选择
2014/04/29 Javascript
js动态删除div元素基本思路及实现代码
2014/05/08 Javascript
Node.js中调用mysql存储过程示例
2014/12/20 Javascript
学习JavaScript鼠标响应事件
2015/12/25 Javascript
jQuery给元素添加样式的方法详解
2015/12/30 Javascript
再谈Javascript中的异步以及如何异步
2016/08/19 Javascript
jQuery 选择符详细介绍及整理
2016/12/02 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
2016/12/12 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
2017/02/13 Javascript
ReactJs实现树形结构的数据显示的组件的示例
2017/08/18 Javascript
关于react-router/react-router-dom v4 history不能访问问题的解决
2018/01/08 Javascript
vue内置组件transition简单原理图文详解(小结)
2018/07/12 Javascript
对Vue table 动态表格td可编辑的方法详解
2018/08/28 Javascript
webpack4简单入门实例
2018/09/06 Javascript
微信小程序生成二维码的示例代码
2019/03/29 Javascript
Python httplib,smtplib使用方法
2008/09/06 Python
Python Tkinter GUI编程入门介绍
2015/03/10 Python
python 性能优化方法小结
2017/03/31 Python
利用Python如何实现数据驱动的接口自动化测试
2018/05/11 Python
Python开发企业微信机器人每天定时发消息实例
2020/03/17 Python
Python matplotlib绘制图形实例(包括点,曲线,注释和箭头)
2020/04/17 Python
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
2010/07/20 HTML / CSS
极简的HTML5模版
2015/07/09 HTML / CSS
贪睡宠物用品:Snoozer Pet Products
2020/02/04 全球购物
澳大利亚在线性感内衣商店:Fantasy Lingerie
2021/02/07 全球购物
回门宴新郎答谢词
2014/01/12 职场文书
学生爱国演讲稿
2014/01/14 职场文书
研发工程师岗位职责
2014/04/28 职场文书
健康教育评估方案
2014/05/25 职场文书
2015新年联欢晚会开场白
2014/12/14 职场文书