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 硬盘序列号+其它硬件信息
Dec 23 Javascript
WordPress JQuery处理沙发头像
Jun 22 Javascript
基于jquery实现的可以编辑选择的下拉框的代码
Nov 19 Javascript
window.event.keyCode兼容IE和Firefox实现js代码
May 30 Javascript
js中的push和join方法使用介绍
Oct 08 Javascript
JS简单实现登陆验证附效果图
Nov 19 Javascript
Javascript检查图片大小不要让大图片撑破页面
Nov 04 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
Oct 25 Javascript
微信小程序 天气预报开发实例代码源码
Jan 20 Javascript
Vue-Cli中自定义过滤器的实现代码
Aug 12 Javascript
推荐15个最好用的JavaScript代码压缩工具
Feb 13 Javascript
详谈Object.defineProperty 及实现数据双向绑定
Jul 18 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 adodb介绍
2009/03/19 PHP
你可能不再需要JQUERY
2021/03/09 Javascript
jQuery ReferenceError: $ is not defined 错误的处理办法
2013/05/10 Javascript
js触发onchange事件的方法说明
2014/03/08 Javascript
jquery easyui 结合jsp简单展现table数据示例
2014/04/18 Javascript
原生js事件的添加和删除的封装
2014/07/01 Javascript
JavaScript中原型链存在的问题解析
2016/09/25 Javascript
微信小程序 wxapp地图 map详解
2016/10/31 Javascript
vue获取input输入值的问题解决办法
2017/10/17 Javascript
Vue2 SSR渲染根据不同页面修改 meta
2017/11/20 Javascript
angular学习之动态创建表单的方法
2018/12/07 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
2019/09/02 Javascript
微信小程序登录时如何获取input框中的内容
2019/12/04 Javascript
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
2020/06/11 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
2020/08/07 Javascript
Python Web框架Flask中使用七牛云存储实例
2015/02/08 Python
Python2中的raw_input() 与 input()
2015/06/12 Python
Python中shutil模块的常用文件操作函数用法示例
2016/07/05 Python
Python3.5集合及其常见运算实例详解
2019/05/01 Python
python发送多人邮件没有展示收件人问题的解决方法
2019/06/21 Python
Python中三维坐标空间绘制的实现
2020/09/22 Python
Python datetime模块的使用示例
2021/02/02 Python
优衣库美国官网:UNIQLO美国
2018/04/14 全球购物
英国网上购买肉类网站:Great British Meat
2018/10/17 全球购物
工作自荐信
2013/12/11 职场文书
酒吧创业计划书
2014/01/18 职场文书
学生通报表扬范文
2015/05/04 职场文书
微观世界观后感
2015/06/10 职场文书
巴黎圣母院读书笔记
2015/06/26 职场文书
大学学生会竞选稿
2015/11/19 职场文书
2016国培学习心得体会
2016/01/08 职场文书
2016年优秀少先队辅导员事迹材料
2016/02/26 职场文书
如何书写你的职业生涯规划书?
2019/06/27 职场文书
Ajax实现局部刷新的方法实例
2021/03/31 Javascript
聊聊Python String型列表求最值的问题
2022/01/18 Python
微信小程序实现轮播图指示器
2022/06/25 Javascript