博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
node.js 上传文件
阅读量:5072 次
发布时间:2019-06-12

本文共 2866 字,大约阅读时间需要 9 分钟。

在工作中碰到了这样的需求,需要用nodejs 来上传文件,之前也只是知道怎么通过浏览器来上传文件,  用nodejs的话,  相当于模拟浏览器的行为。 google 了一番之后,  明白了浏览器无非就是利用http协议来给服务器传输数据, 具体协议就是《》, 在浏览器上通过form 表单来上传文件就是通过这个协议,我们可以先看看浏览器给服务端发送了什么数据, 就可以依葫芦画瓢的把上传功能实现出来。说起form 表单上传文件的话, 大家应该很熟悉:

 提交时, 用fiddler 抓包可以看到向服务端发出这样的数据:

POST http://www.qq.com/ HTTP/1.1Host: www.qq.comContent-Length: 23Content-Type: application/x-www-form-urlencoded; charset=UTF-8text1=hello&text2=world

值得注意的是Content-Type默认为application/x-www-form-urlencoded,所以消息会经过URL编码。比如“你好”会编码为 %E4%BD%A0%E5%A5%BD。

接下来我们看一下通过form 表单是怎么上传的。大家应该也不陌生:

然后新建一个只有hello world字样的upload.txt文本文件上传上去,我们再吃用fiddler 来抓下包, 可以发现发送过去的数据稍微复杂了一些(已经去掉了很多的其它没关系的请求行,比如缓存控制和cookie之类的):

POST http://www.qq.com/ HTTP/1.1Host: www.qq.comContent-Length: 199Content-Type: multipart/form-data; boundary=----WebKitFormBoundarywr3X7sXBYQQ4ZF5G------WebKitFormBoundarywr3X7sXBYQQ4ZF5GContent-Disposition: form-data; name="myfile"; filename="upload.txt"Content-Type: text/plainhello 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来保存上传的文件来用作测试:

另外,根据RFC 1867 还可以实现一次上传多个文件的功能,  这个在这里就不详述,  需要的话可以详细参考RFC 1867来实现。

转载于:https://www.cnblogs.com/king_domain/p/5630665.html

你可能感兴趣的文章
团队项目开发客户端——登录子系统的设计
查看>>
IO—》Properties类&序列化流与反序列化流
查看>>
session如何保存在专门的StateServer服务器中
查看>>
react展示数据
查看>>
测试计划
查看>>
选择器
查看>>
Mysql与Oracle 的对比
查看>>
jquery实现限制textarea输入字数
查看>>
thinkphp5 csv格式导入导出(多数据处理)
查看>>
PHP上传RAR压缩包并解压目录
查看>>
Codeforces 719B Anatoly and Cockroaches
查看>>
jenkins常用插件汇总
查看>>
c# 泛型+反射
查看>>
第九章 前后查找
查看>>
Python学习资料
查看>>
多服务器操作利器 - Polysh
查看>>
jQuery 自定义函数
查看>>
jquery datagrid 后台获取datatable处理成正确的json字符串
查看>>
ActiveMQ与spring整合
查看>>
web服务器
查看>>