Node.js HTTP服务器中的文件、图片上传的方法


Posted in Javascript onSeptember 23, 2019

HTTP协议中,multipart/form-data格式用于向服务器发送二进制数据,通过这一内容类型(Content-Type)可以实现文件、图片的上传。由于这种格式发送的是二进制数据,在服务器端接收和处理数据时会与其它内容类型有所有区别。

HTTP协议中的文件上传

最早的HTTP协议中是不支持文件上传的,在1995年制定的rfc1867规范中,在HTTP POST请求的内容类型Content-Type中扩展了multipart/form-data类型,该类型用于向服务器发送二进制数据,以便支持文件的上传。

POST上传文件

我们通过form表单提交文件时,会构造类似像下面这样一个表单:

<form enctype="multipart/form-data" action="_URL_" method="POST">
 <input name="userfile1" type="file">
 <input type="submit" value="发送文件">
</form>

在使用form提交表单数据时,默认的编码格式为application/x-www-form-urlencoded,上传文件时需要通过enctype属性将编码方式设置为multipart/form-data。

HTTP数据提交与服务器数据解析

在包含请求体的请求中,提交的数据会按指定编码类型进行编码,而客户端会按编码方式设置请求头中的Content-Type字段。
在一个application/x-www-form-urlencoded编码的请求中,会设置一个如下的请求头:

Content-Type:application/x-www-form-urlencoded

而用于文件上传的编码方式multipart/form-data,会设置一个如下的请求头:

Content-type: multipart/form-data, boundary=AaB03x

服务器数据接收与解析

对于一个编码方式为application/x-www-form-urlencoded的请求来说,会对提交内容进行URL编码。服务器会收到类似如下内容:

POST / HTTP/1.1
Content-Type: application/x-www-form-urlencoded
Accept-Encoding: gzip, deflate
Host: itbilu.com
Content-Length: 23
Connection: Keep-Alive
Cache-Control: max-age=0

key1=value1&key2=value2

请求头与请求体之间会有一个空行,服务器会对请求体以queryString的方式进行解码。

而对一个multipart/form-data的文件上传请求来说,收到的内容类似如下:

POST / HTTP/1.1
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryYN9YYwO9ESipYBIx
Accept-Encoding: gzip, deflate
Host: itbilu.com
Content-Length: 22646
Connection: Keep-Alive
Cache-Control: max-age=0

------WebKitFormBoundaryoqBx9oYBhx4SF1YQ
Content-Disposition: form-data; name="myName"

itbilu.com
------WebKitFormBoundaryYN9YYwO9ESipYBIx
Content-Disposition: form-data; name="upload"; filename="41GiLecHO3L.jpg"
Content-Type: image/jpeg

����JFIF��C // 文件的二进制数据
……
--------WebKitFormBoundaryYN9YYwO9ESipYBIx--

在请求头的Content-Type字段中,除了编码类型为multipart/form-data描述外,还有一个boundary属性,这是客户端随机生成的一个数据边界描述。

如上所示,文件上传时内容是分段传输的,每一boundary表示一个fild(form表单控值)边界。

如上面示例所示,上传文件时除内容描述外还包含一个的Content-Type文件MIME的描述,其后是一个空行和文件的二进制数据。所有的表单数据结束后,会有一个”?”+boundary+”?”结束符。而服务器接收到数据后,同样会根据boundary来进行数据的接收和解析。

Node.js中处理图片/文件上传

Node.js中处理文件上传的第三方模块,本站曾经介绍过使用formidable模块处理文件上传,下面简单介绍使用Node.js原生环境处理图片上传,上传文件时也可以参考处理。

首先,使用Node.js的HTTP模块创建一个HTTP服务器:

const http = require('http');
const fs = require('fs');
const util = require('util');
const querystring =require('querystring');

//用http模块创建一个http服务端
http.createServer(function(req, res) {
 if (req.url == '/upload' && req.method.toLowerCase() === 'get') {
  //显示一个用于文件上传的form
  res.writeHead(200, {'content-type': 'text/html'});
  res.end(
   '<form action="/upload" enctype="multipart/form-data" method="post">'+
    '<input type="file" name="upload" multiple="multiple" />'+
    '<input type="submit" value="Upload" />'+
   '</form>'
  );
 } else if (req.url == '/upload' && req.method.toLowerCase() === 'post') {
  if(req.headers['content-type'].indexOf('multipart/form-data')!==-1)
   parseFile(req, res)
  } else {
   res.end('其它提交方式');
  }
}).listen(3000);

在这一步中,我们创建HTTP 服务器,当GET请求时,会加载一上用于文件上传的form表单。上传文件会通过POST方式提交到服务器,这时服务端会通过parseFile函数解析并保存文件,其解析代码如下:

function parseFile (req, res) {
 req.setEncoding('binary');
 var body = '';  // 文件数据
 var fileName = ''; // 文件名
 // 边界字符串
 var boundary = req.headers['content-type'].split('; ')[1].replace('boundary=','');
 req.on('data', function(chunk){
  body += chunk;
 });

 req.on('end', function() {
  var file = querystring.parse(body, '\r\n', ':')

  // 只处理图片文件
  if (file['Content-Type'].indexOf("image") !== -1)
  {
   //获取文件名
   var fileInfo = file['Content-Disposition'].split('; ');
   for (value in fileInfo){
    if (fileInfo[value].indexOf("filename=") != -1){
     fileName = fileInfo[value].substring(10, fileInfo[value].length-1);

     if (fileName.indexOf('\\') != -1){
      fileName = fileName.substring(fileName.lastIndexOf('\\')+1);
     }
     console.log("文件名: " + fileName);
    }
   }

   // 获取图片类型(如:image/gif 或 image/png))
   var entireData = body.toString();
   var contentTypeRegex = /Content-Type: image\/.*/;

   contentType = file['Content-Type'].substring(1);

   //获取文件二进制数据开始位置,即contentType的结尾
   var upperBoundary = entireData.indexOf(contentType) + contentType.length;
   var shorterData = entireData.substring(upperBoundary);

   // 替换开始位置的空格
   var binaryDataAlmost = shorterData.replace(/^\s\s*/, '').replace(/\s\s*$/, '');

   // 去除数据末尾的额外数据,即: "--"+ boundary + "--"
   var binaryData = binaryDataAlmost.substring(0, binaryDataAlmost.indexOf('--'+boundary+'--'));

   // 保存文件
   fs.writeFile(fileName, binaryData, 'binary', function(err) {
    res.end('图片上传完成');
   });
  } else {
   res.end('只能上传图片文件');
  }
 });
}

req是一个IncomingMessage对象,而该对象又实现了ReadableStream,所以我们可以用流的方式来接收数据。数据接收完成了,按rfc1867规范进行了数据处理,并通过fs模块保存了文件。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript在IE和FireFox中的不同表现简析
Dec 03 Javascript
iframe的父子窗口之间的对象相互调用基本用法
Sep 03 Javascript
jquery修改网页背景颜色通过css方法实现
Jun 06 Javascript
Python脚本后台运行的几种方式
Mar 09 Javascript
Javascript简写条件语句(推荐)
Jun 12 Javascript
详解webpack es6 to es5支持配置
May 04 Javascript
js获取一组日期中最近连续的天数
May 25 Javascript
Angularjs 实现动态添加控件功能
May 25 Javascript
JS改变页面颜色源码分享
Feb 24 Javascript
vue 组件开发原理与实现方法详解
Nov 29 Javascript
微信小程序canvas截取任意形状的实现代码
Jan 13 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
Oct 28 Javascript
node 文件上传接口的转发的实现
Sep 23 #Javascript
layui 上传文件_批量导入数据UI的方法
Sep 23 #Javascript
Electron 调用命令行(cmd)
Sep 23 #Javascript
layui文件上传控件带更改后数据传值的方法
Sep 23 #Javascript
原生JavaScript实现日历功能代码实例(无引用Jq)
Sep 23 #Javascript
小程序实现上下移动切换位置
Sep 23 #Javascript
微信小程序分包加载代码实现方法详解
Sep 23 #Javascript
You might like
PHP数组交集的优化代码分析
2011/03/06 PHP
php读取flash文件高宽帧数背景颜色的方法
2015/01/06 PHP
php实现微信支付之现金红包
2018/05/30 PHP
页面中iframe相互传值传参
2009/12/13 Javascript
js+xml生成级联下拉框代码
2012/07/24 Javascript
jQuery遍历对象、数组、集合实例
2014/11/08 Javascript
jQuery实现Tab菜单滚动切换的方法
2015/09/21 Javascript
基于zepto的移动端轻量级日期插件--date_picker
2016/03/04 Javascript
JS实现的幻灯片切换显示效果
2016/09/07 Javascript
JavaScript省市区三级联动菜单效果
2016/09/21 Javascript
关于iframe跨域POST提交的方法示例
2017/01/15 Javascript
JS实现json对象数组按对象属性排序操作示例
2018/05/18 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
2018/07/15 Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
2018/09/25 Javascript
用vuex写了一个购物车H5页面的示例代码
2018/12/04 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
2019/05/07 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
2019/11/04 Javascript
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
2020/02/11 Javascript
浅谈React中组件逻辑复用的那些事儿
2020/05/21 Javascript
[42:24]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第三场 11.27
2020/12/01 DOTA
使用Python脚本来控制Windows Azure的简单教程
2015/04/16 Python
Python实现的人工神经网络算法示例【基于反向传播算法】
2017/11/11 Python
python opencv图片编码为h264文件的实例
2019/12/12 Python
Pytorch 多维数组运算过程的索引处理方式
2019/12/27 Python
解决Jupyter notebook中.py与.ipynb文件的import问题
2020/04/21 Python
python3.7+selenium模拟淘宝登录功能的实现
2020/05/26 Python
学习python需要有编程基础吗
2020/06/02 Python
python switch 实现多分支选择功能
2020/12/21 Python
美国椅子和沙发制造商:La-Z-Boy
2020/10/25 全球购物
介绍下static、final、abstract区别
2015/01/30 面试题
应用化学专业职业生涯规划书
2013/12/31 职场文书
廉洁自律演讲稿
2014/05/22 职场文书
党员批评与自我批评思想汇报(集锦)
2014/09/14 职场文书
工伤事故处理协议书怎么写
2014/10/15 职场文书
红色经典电影观后感
2015/06/18 职场文书
Nginx如何配置Http、Https、WS、WSS的方法步骤
2021/05/11 Servers