工作中碰到了这样的需求,需要用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来实现。
标:
上传文件、文件夹
给你三秒钟,思考下可能用到哪些知识点
前期准备
1.1 整体流程
1. index.js模块: 程序入口, 有服务器(server.js)和路由(route.js)和处理(handler.js)模块组成;
2. server.js模块: 专门处理不同路由, 并做相应的处理;
3. route.js模块: 请求的地址, 处理方法, 响应, 请求;
4. handler.js模块: 封装不同的方法,交由路由route.js模块来选择调用;
5. HTML文件: 存在HTML文件; 6. package.json模块: CommonJS规定的规范;
我想这个不同于理论的实践,会慢慢为接下来打下坚实的基础的。
1.2 模块包
formidable是一个用于处理文件、图片、视频等数据上传的模块,支持GB级上传数据处理,支持多种客户端数据提交。有极高的测试覆盖率,非常适合在生产环境中使用。
npm配置安装
npm install formidable@latest
util是一个Node.js核心模块,util模块设计的主要目的是为了满足Node内部API的需求。其中包括:格式化字符串、对象的序列化、实现对象继承等常用方法。要使用util模块中的方法,只需require('util')引入即可。
1.3 package.json文件
package.json:定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据)。npm install命令根据这个配置文件,自动下载所需的模块.
1. scripts指定了运行脚本命令的npm命令行缩写,比如start指定了运行npm run start时,所要执行的命令。
2. dependencies字段指定了项目运行所依赖的模块;
3. devDependencies指定项目开发所需要的模块。
指定版本:比如1.2.2,遵循“大版本.次要版本.小版本”的格式规定,安装时只安装指定版本。
波浪号(tilde)+指定版本:比如~1.2.2,表示安装1.2.x的最新版本(不低于1.2.2),但是不安装1.3.x,也就是说安装时不改变大版本号和次要版本号。
插入号(caret)+指定版本:比如?1.2.2,表示安装1.x.x的最新版本(不低于1.2.2),但是不安装2.x.x,也就是说安装时不改变大版本号。
需要注意的是,如果大版本号为0,则插入号的行为与波浪号相同,这是因为此时处于开发阶段,即使是次要版本号变动,也可能带来程序的不兼容。 latest:安装最新版本。
例子如下:
{
"name": "upload",
"version": "1.0.1",
"description": "文件上传下载",
"main": "index.js",
"scripts": {
"start": "node index.js"
},
"author": "hhw",
"license": "ISC"
//依赖模块
"dependencies": {
"formidable":"formidable@1.0.17",
},
}
第二部分 代码实现部分
2.1 服务器server.js代码实现
//引入http utl 模块
var http=require('http');
var url=require('url');
//程序入口, 选择路由, 并做相应的处理
function start(route, handler){
//选择路由
function onRequest(request, response) {
//url.parse(): 输入 URL 字符串,返回一个对象。
//对象中 pathname 所代表的路径
var pathname=url.parse(request.url).pathname;
route(pathname, handler, response, request);
}
//服务器对不同的路由做出不同的响应
http.createServer(onRequest).listen(3000);
}
//导出接口
exports.start=start;
2.2 路由选择代码
//具体处理路由的功能模块
//请求的地址, 处理方法<upload download...>, 响应, 请求
function route(pathname, handler, response, request){
//如果请求的方法是存在的函数就返回交给服务器处理
if (typeof handler[pathname]==='function'){
return handler[pathname](request, response);
} else{
//否则返回404
response.writeHead(404, {'Content-Type': 'text/html'});
response.write('404 Not Found!');
response.end();
}
}
exports.route=route;
2.3 具体处理不同需求的代码实现
node-formidable
//解析字符串, fs模块, 格式化模块
var fs=require('fs'),
formidable=require('formidable'),
util=require('util'),
http=require('http');
const path=require('path');
//程序入口展示HTML文件
function home(request, response){
//加载本地页面HTML
fs.readFile('./index.html', function(err, data) {
response.writeHead(200, {'Content-Type': 'text/html'});
response.write(data);
response.end();
});
}
//formidable是一个用于处理文件、图片、视频等数据上传的模块,支持GB级上传数据处理,支持多种客户端数据提交。有极高的测试覆盖率,非常适合在生产环境中使用。
function uploads(request, response) {
//form表单
var form=new formidable.IncomingForm();
//保留后缀
form.keepExtensions=true;
form.encoding='utf-8';
//上传的数据保存的路径
form.uploadDir='./';
//该方法会转换请求中所包含的表单数据,callback会包含所有字段域和文件信息
// fields 是普通表单数据
// files 是文件数据
form.parse(request, function(err, fields, files) {
response.writeHead(200, {'Content-type': 'text/plain'});
//上传文件的名称
var filename=files.upload.name;
var path=files.upload.path;
//更改名称
fs.rename(path, form.uploadDir + filename);
//响应 格式化打印
response.end(util.inspect(form));
});
}
function show (response, request) {
console.log('show module');
fs.readFile ('/tmp/test.png ', 'binary', function (error, file) {
if (error) {
response.writeHead(200, {'Content-Type': 'text/html'});
response.write(error);
response.end();
} else {
response.writeHead(200, {'Content-Type': 'image/png'});
response.write(file, 'binary');
response.end();
}
});
}
function downloads(requset, response){
//node官网图标
var URL="http://nodejs.cn/static/images/logos/nodejs-green.png";
//request
request
.get(URL)
//监听response
.on('response', function(res) {
console.log(res.statusCode); // 200
console.log(res.headers['content-type']); // 'image/png'
console.log(res.headers['content-length']);
//打印接受的数据大小
res.on('data', function(data){
console.log('接受到数据' + data.length )
})
})
//监听错误信息
.on('error', function(error){
consloe.log(error);
})
//以流的形式写入创建的test.png文件
.pipe(fs.createWriteStream('test.png'));
response.writeHead(200);
response.write('请前往同级目录下查看下载内容');
response.end();
}
exports.home=home;
exports.upload=uploads;
exports.download=downloads;
2.4 程序入口调用<待补充>
//引用模块
var server=require('./server');
var router=require('./router');
var handler=require('./handler');
var formidable=require('formidable');
//调用具体方法
var method={};
method['/']=handler.home;
method['/home']=handler.home;
method['/upload']=handler.upload;
//交给服务器模块处理
server.start(router.route, method);
2.5 首页中上传模块HTML文件 <待补充>
最早的HTTP协议中是不支持文件上传的,在1995年制定的rfc1867规范中,在HTTP POST请求的内容类型Content-Type
中扩展了multipart/form-data
类型,该类型用于向服务器发送二进制数据,以便支持文件的上传。
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
//上传文件时需要通过enctype
属性将编码方式设置为multipart/form-data
<form action="/upload", enctype="multipart/form-data" method="post">
<input type="file" name="upload" multiple="multipart">
<input type="submit" value="提888交">
</form>
<form action="/download", enctype="multipart/form-data" method="get">
<input type="submit" value='下载'>
</form>
</body>
</html>
者:诀九 前端名狮
转发链接:https://mp.weixin.qq.com/s/BMg8bFUwa4gmm6v2acAe7Q
*请认真填写需求信息,我们会在24小时内与您取得联系。