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 相关文章推荐
JQuery从头学起第三讲
Jul 06 Javascript
关于JAVASCRIPT urldecode URL解码的问题
Jan 08 Javascript
扩展JavaScript功能的正确方法(译文)
Apr 12 Javascript
javascript的动态加载、缓存、更新以及复用(一)
Jun 09 Javascript
JavaScript实现MIPS乘法模拟的方法
Apr 17 Javascript
跟我学习javascript的this关键字
May 28 Javascript
JQueryEasyUI之DataGrid数据显示
Nov 23 Javascript
jQuery操作json常用方法示例
Jan 04 Javascript
详解VUE中v-bind的基本用法
Jul 13 Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
Oct 28 Javascript
如何实现小程序tab栏下划线动画效果
May 18 Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
Aug 31 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实现变色验证码实例
2014/01/06 PHP
Yii框架弹出窗口组件CJuiDialog用法分析
2017/01/07 PHP
微信小程序 消息推送php服务器验证实例详解
2017/03/30 PHP
PHP实现websocket通信的方法示例
2018/08/28 PHP
laravel邮件发送的实现代码示例
2020/01/31 PHP
如何用javascript去掉字符串里的所有空格
2007/02/08 Javascript
javascript编程起步(第五课)
2007/02/27 Javascript
Javascript 更新 JavaScript 数组的 uniq 方法
2008/01/23 Javascript
学习ExtJS TextField常用方法
2009/10/07 Javascript
js 走马灯简单实例
2013/11/21 Javascript
使用不同的方法结合/合并两个JS数组
2014/09/18 Javascript
jQuery中removeAttr()方法用法实例
2015/01/05 Javascript
基于javascript实现全屏漂浮广告
2016/03/31 Javascript
jquery表单验证插件formValidator使用方法
2016/04/01 Javascript
JS实现的计数排序与基数排序算法示例
2017/12/04 Javascript
vue 组件高级用法实例详解
2018/04/11 Javascript
记录vue做微信自定义分享的一些问题
2019/09/12 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
2019/11/06 Javascript
Python中数字以及算数运算符的相关使用
2015/10/12 Python
浅谈django开发者模式中的autoreload是如何实现的
2017/08/18 Python
详谈Python3 操作系统与路径 模块(os / os.path / pathlib)
2018/04/26 Python
python实现Dijkstra静态寻路算法
2019/01/17 Python
python自制包并用pip免提交到pypi仅安装到本机【推荐】
2019/06/03 Python
简单了解python高阶函数map/reduce
2019/06/28 Python
Django Model中字段(field)的各种选项说明
2020/05/19 Python
Python使用jupyter notebook查看ipynb文件过程解析
2020/06/02 Python
详解python对象之间的交互
2020/09/29 Python
Python实现Appium端口检测与释放的实现
2020/12/31 Python
科颜氏英国官网:Kiehl’s英国
2019/11/20 全球购物
2014国培学习感言
2014/03/05 职场文书
计划生育标语
2014/06/23 职场文书
县级领导干部开展党的群众路线教育实践活动工作汇报
2014/10/25 职场文书
实习介绍信范文
2015/05/05 职场文书
如何判断pytorch是否支持GPU加速
2021/06/01 Python
电频谱管理的原则是什么
2022/02/18 无线电
Redis如何实现验证码发送 以及限制每日发送次数
2022/04/18 Redis