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 02 Javascript
JS的document.all函数使用示例
Dec 30 Javascript
jquery easyui中treegrid用法的简单实例
Feb 18 Javascript
node.js中的fs.renameSync方法使用说明
Dec 16 Javascript
javascript 构造函数方式定义对象
Jan 02 Javascript
基于AngularJS实现iOS8自带的计算器
Sep 12 Javascript
jquery.form.js异步提交表单详解
Apr 25 jQuery
JavaScript实现简单的文本逐字打印效果示例
Apr 12 Javascript
React styled-components设置组件属性的方法
Aug 07 Javascript
ztree加载完成后显示勾选节点的实现代码
Oct 22 Javascript
微信小程序开发常见问题及解决方案
Jul 11 Javascript
Vue在H5 项目中使用融云进行实时个人单聊通讯
Dec 14 Vue.js
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+MySQL 手工注入语句大全 推荐
2009/10/30 PHP
thinkPHP5.0框架API优化后的友好性分析
2017/03/17 PHP
PDO::lastInsertId讲解
2019/01/29 PHP
laravel多条件查询方法(and,or嵌套查询)
2019/10/09 PHP
Yii框架安装简明教程
2020/05/15 PHP
[转]JS宝典学习笔记
2007/02/07 Javascript
JavaScript 调试器简介
2009/02/21 Javascript
关于锚点跳转及jQuery下相关操作与插件
2012/10/01 Javascript
javascript轻量级模板引擎juicer使用指南
2014/06/22 Javascript
使用JSON.parse将json字符串转换成json对象的时候会出错
2014/09/04 Javascript
再谈javascript常见错误及解决方法
2016/09/16 Javascript
javascript中异常处理案例(推荐)
2016/10/03 Javascript
Vue2.0 vue-source jsonp 跨域请求
2017/08/04 Javascript
NodeJS实现视频转码的示例代码
2017/11/18 NodeJs
jQuery时间戳和日期相互转换操作示例
2018/12/07 jQuery
vue 实现websocket发送消息并实时接收消息
2019/12/09 Javascript
JavaScript实现简单的图片切换功能(实例代码)
2020/04/10 Javascript
详解JavaScript自定义函数
2020/07/29 Javascript
python验证码识别教程之利用投影法、连通域法分割图片
2018/06/04 Python
python实现简单日期工具类
2019/04/24 Python
python如何以表格形式打印输出的方法示例
2019/06/21 Python
python sorted方法和列表使用解析
2019/11/18 Python
python爬虫开发之urllib模块详细使用方法与实例全解
2020/03/09 Python
django自定义非主键自增字段类型详解(auto increment field)
2020/03/30 Python
Python3.7 读取音频根据文件名生成脚本的代码
2020/04/07 Python
在python里创建一个任务(Task)实例
2020/04/25 Python
Python模拟登入的N种方式(建议收藏)
2020/05/31 Python
Python selenium如何打包静态网页并下载
2020/08/12 Python
golang/python实现归并排序实例代码
2020/08/30 Python
详解pycharm连接远程linux服务器的虚拟环境的方法
2020/11/13 Python
Python将QQ聊天记录生成词云的示例代码
2021/02/10 Python
Omio西班牙:全欧洲低价大巴、火车和航班搜索和比价
2017/02/11 全球购物
手术室护士长竞聘书
2014/03/31 职场文书
2014年度安全生产目标管理责任书
2014/07/25 职场文书
党支部四风整改方案
2014/10/25 职场文书
mysql 获取时间方式
2022/03/20 MySQL