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 相关文章推荐
js实现日期级联效果
Jan 23 Javascript
JS 删除字符串最后一个字符的实现代码
Feb 20 Javascript
8个实用的jQuery技巧
Mar 04 Javascript
javascript实现数独解法
Mar 14 Javascript
JavaScript实现把数字转换成中文
Jun 29 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
Sep 08 Javascript
基于jQuery实现文字打印动态效果
Apr 21 jQuery
vue数据双向绑定的注意点
Jun 23 Javascript
Angular实现类似博客评论的递归显示及获取回复评论的数据
Nov 06 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
Sep 20 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
Apr 22 Javascript
Vue双向绑定实现原理与方法详解
May 07 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小技巧之JS和CSS优化工具Minify的使用方法
2014/05/19 PHP
php中使用gd库实现远程图片下载实例
2015/05/12 PHP
php模拟post上传图片实现代码
2016/06/24 PHP
PHP实现活动人选抽奖功能
2017/04/19 PHP
PHP实现在windows下配置sendmail并通过mail()函数发送邮件的方法
2017/06/20 PHP
ext combox 下拉框不出现自动提示,自动选中的解决方法
2010/02/24 Javascript
iframe子父页面调用js函数示例
2013/11/07 Javascript
JavaScript 判断用户输入的邮箱及手机格式是否正确
2013/12/08 Javascript
jQuery实现伸展与合拢panel的方法
2015/04/30 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
2015/06/10 Javascript
json定义及jquery操作json的方法
2016/09/29 Javascript
jQuery弹出div层过2秒自动消失
2016/11/29 Javascript
基于javascript实现的快速排序
2016/12/02 Javascript
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
2017/03/02 Javascript
Angularjs的键盘事件的绑定
2017/07/27 Javascript
写gulp遇到的ES6问题详解
2018/12/03 Javascript
[02:24]DOTA2亚洲邀请赛 NAVI战队出场宣传片
2015/02/07 DOTA
Python自定义主从分布式架构实例分析
2016/09/19 Python
python3 面向对象__类的内置属性与方法的实例代码
2018/11/09 Python
Python实现Word表格转成Excel表格的示例代码
2020/04/16 Python
python实现斗地主分牌洗牌
2020/06/22 Python
解决python 在for循环并且pop数组的时候会跳过某些元素的问题
2020/12/11 Python
canvas 绘图时位置偏离的问题解决
2020/09/16 HTML / CSS
Big Green Smile德国网上商店:提供各种天然产品
2018/05/23 全球购物
英国汽车零件购物网站:GSF Car Parts
2019/05/23 全球购物
如何提高SQL Server的安全性
2016/07/25 面试题
厨师岗位职责
2013/11/12 职场文书
新闻传媒系求职信范文
2014/04/19 职场文书
幼儿园教师的自我评价范文
2014/09/17 职场文书
个人欠款协议书范本2014
2014/11/02 职场文书
办公室禁烟通知
2015/04/23 职场文书
2015年安置帮教工作总结
2015/05/22 职场文书
汶川大地震感悟
2015/08/10 职场文书
人生感悟经典句子
2019/08/20 职场文书
Python+Appium实现自动抢微信红包
2021/05/21 Python
mybatis 获取更新记录的id
2022/05/20 Java/Android