Node.js实现文件上传


Posted in Javascript onJuly 05, 2016

在工作中碰到了这样的需求,需要用nodejs 来上传文件,之前也只是知道怎么通过浏览器来上传文件, 用nodejs的话, 相当于模拟浏览器的行为。 google 了一番之后, 明白了浏览器无非就是利用http协议来给服务器传输数据, 具体协议就是《RFC 1867 - Form-based File Upload in HTML》, 在浏览器上通过form 表单来上传文件就是通过这个协议,我们可以先看看浏览器给服务端发送了什么数据, 就可以依葫芦画瓢的把上传功能实现出来。说起form 表单上传文件的话, 大家应该很熟悉:

<form action="http://www.qq.com/" method="post">
<input type="text" name="text1" /><br />
<input type="text" name="text2" /><br />
<input type="submit" />
</form>

提交时, 用fiddler 抓包可以看到向服务端发出这样的数据:

POST http://www.qq.com/ HTTP/1.1
Host: www.qq.com
Content-Length: 23
Content-Type: application/x-www-form-urlencoded; charset=UTF-8

text1=hello&text2=world

值得注意的是Content-Type默认为application/x-www-form-urlencoded,所以消息会经过URL编码。比如“你好”会编码为 %E4%BD%A0%E5%A5%BD。

接下来我们看一下通过form 表单是怎么上传的。大家应该也不陌生:

<form action="http://www.qq.com" method="post" enctype="multipart/form-data">
<input type="file" name="myfile" />
<input type="submit" value="submit" />
</form>

然后新建一个只有hello world字样的upload.txt文本文件上传上去,我们再吃用fiddler 来抓下包, 可以发现发送过去的数据稍微复杂了一些(已经去掉了很多的其它没关系的请求行,比如缓存控制和cookie之类的):

POST http://www.qq.com/ HTTP/1.1
Host: www.qq.com
Content-Length: 199
Content-Type: multipart/form-data; boundary=----WebKitFormBoundarywr3X7sXBYQQ4ZF5G

------WebKitFormBoundarywr3X7sXBYQQ4ZF5G
Content-Disposition: form-data; name="myfile"; filename="upload.txt"
Content-Type: text/plain

hello world

------WebKitFormBoundarywr3X7sXBYQQ4ZF5G--

根据RFC 1867的定义,我们需要生成一段边界数据,这个数据不能在内容的其它地方出现,这个可以自己定义, 在每个浏览器的生成算法可能都不一样, 上面的boundary就是分隔数据,生成了分隔数据之后, 就可以把分隔数据放在头部的Content-Type里面传送给服务端, 也就是上文的 Content-Type: multipart/form-data; boundary=----WebKitFormBoundarywr3X7sXBYQQ4ZF5G, 另外,上传的内容,需要用分隔数据来分隔成若干个段,然后每段数据里面都有文件的文件名,还有上传时候的name,服务端就是用这个name来接收文件,还有文件的类型Content-Type,在这个例子里是 text/plain,如果上传的是png图片就是image/png。文件类型的一个空行后就是所上传的文件的内容,在这个例子里也是为了容易理解所以上传的是文本文件所以内容直接就能够显示出来,如果上传的是图片文件, 因为是二进制文件,fiddler 就显示的是乱码。 文件的内容结束之后就是一个空行再加上边界数据。

了解了发送格式的细节之后, 下一步就是使用nodejs来编程实现,简单来讲, 就是按照格式把数据发送给服务端就行了。

const http = require('http');
const fs = require('fs');
//post地址为本地服务的一个php,用于测试上传是否成功
var options = {
hostname: 'localhost',
port: 80,
path: '/get.php',
method: 'POST'
}
//生成分隔数据
var boundaryKey = '----WebKitFormBoundaryjLVkbqXtIi0YGpaB'; 
//读取需要上传的文件内容
fs.readFile('./upload.txt', function (err, data) {
//拼装分隔数据段
var payload = '--' + boundaryKey + '\r\n' + 'Content-Disposition:form-data; name="myfile"; filename="upload.txt"\r\n' + 'Content-Type:text/plain\r\n\r\n';
payload += data;
payload += '\r\n--' + boundaryKey + '--';
//发送请求
var req = http.request(options, function (res) {
res.setEncoding('utf8');
res.on('data', function (chunk) {
console.log('body:' + chunk);
});
});
req.on('error', function(e) {
console.error("error:"+e);
});
//把boundary、要发送的数据大小以及数据本身写进请求
req.setHeader('Content-Type', 'multipart/form-data; boundary='+boundaryKey+'');
req.setHeader('Content-Length', Buffer.byteLength(payload, 'utf8'));
req.write(payload);
req.end();
});

本文重点在于了解协议并且用代码实现出来, 代码组织上面还有很多优化的地方。

最后在本地apache,简单写一个php来保存上传的文件来用作测试:

<?php
$filePath = './upload.txt';
move_uploaded_file($_FILES['myfile']['tmp_name'] , $filePath);
echo "ok";
?>

另外,根据RFC 1867 还可以实现一次上传多个文件的功能, 这个在这里就不详述, 需要的话可以详细参考RFC 1867来实现。

以上所述是小编给大家介绍的Node.js实现文件上传,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript引导程序
Oct 26 Javascript
JavaScript 输入框内容格式验证代码
Feb 11 Javascript
JavaScript中__proto__与prototype的关系深入理解
Dec 04 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
Mar 05 Javascript
浅谈javascript中的闭包
May 13 Javascript
Kindeditor在线文本编辑器如何过滤HTML
Apr 14 Javascript
浅谈webpack组织模块的原理
Mar 10 Javascript
JS中的回调函数实例浅析
Mar 21 Javascript
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
浅谈vue项目4rs vue-router上线后history模式遇到的坑
Sep 27 Javascript
小程序云开发部署攻略(图文教程)
Oct 30 Javascript
Vue实现商品飞入购物车效果(电商项目)
Nov 26 Javascript
JavaScript数组方法大全(推荐)
Jul 05 #Javascript
JS与HTML结合使用marquee标签实现无缝滚动效果代码
Jul 05 #Javascript
js利用正则表达式检验输入内容是否为网址
Jul 05 #Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
Jul 05 #Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
Jul 04 #Javascript
Bootstrap实现水平排列的表单
Jul 04 #Javascript
JSONP跨域请求实例详解
Jul 04 #Javascript
You might like
PHP令牌 Token改进版
2008/07/18 PHP
phpadmin如何导入导出大数据文件及php.ini参数修改
2013/02/18 PHP
修改apache配置文件去除thinkphp url中的index.php
2014/01/17 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
JavaScript中Object和Function的关系小结
2009/09/26 Javascript
jquery插件之easing 动态菜单
2010/08/21 Javascript
jQuery控制图片的hover效果(smartRollover.js)
2012/03/18 Javascript
使用js实现按钮控制文本框加1减1应用于小时+分钟
2013/12/09 Javascript
使用script的src实现跨域和类似ajax效果
2014/11/10 Javascript
高性能JavaScript模板引擎实现原理详解
2015/02/05 Javascript
jQuery解决input超多的表单提交
2015/08/10 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
2016/02/25 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
2016/04/06 Javascript
js中利用cookie实现记住密码功能
2020/08/20 Javascript
超全面的javascript中变量命名规则
2017/02/09 Javascript
jquery dataTable 获取某行数据
2017/05/05 jQuery
JS switch判断 三目运算 while 及 属性操作代码
2017/09/03 Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
2018/05/08 Javascript
详解微信小程序的 request 封装示例
2018/08/21 Javascript
详解vue在项目中使用百度地图
2019/03/26 Javascript
浅析Angular 实现一个repeat指令的方法
2019/07/21 Javascript
Python实现将n个点均匀地分布在球面上的方法
2015/03/12 Python
python中requests模块的使用方法
2015/04/08 Python
Python写入CSV文件的方法
2015/07/08 Python
Python编程之变量赋值操作实例分析
2017/07/24 Python
Python基础教程之内置函数locals()和globals()用法分析
2018/03/16 Python
在pycharm中配置Anaconda以及pip源配置详解
2019/09/09 Python
python实现一个猜拳游戏
2020/04/05 Python
什么是python的id函数
2020/06/11 Python
欧洲最大的化妆品连锁公司:Douglas道格拉斯
2017/05/06 全球购物
Intimissimi德国网上商店:意大利知名内衣品牌
2018/04/03 全球购物
护理职业应聘自荐书
2013/09/29 职场文书
物业保安员岗位职责
2014/03/14 职场文书
辩护词格式
2015/05/22 职场文书
银行资信证明
2015/06/17 职场文书
婚礼父母致辞
2015/07/28 职场文书