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 相关文章推荐
jQuery中使用了document和window哪些属性和方法小结
Sep 13 Javascript
javascript的回调函数应用示例
Feb 20 Javascript
JavaScript版的TwoQueues缓存模型
Dec 29 Javascript
JavaScript中的操作符==与===介绍
Dec 31 Javascript
BootStrap树状图显示功能
Nov 24 Javascript
jQuery html表格排序插件tablesorter使用方法详解
Feb 10 Javascript
bootstrap如何让dropdown menu按钮式下拉框长度一致
Apr 10 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
Aug 03 Javascript
JS实现获取进今年第几天是周几的方法分析
Jun 27 Javascript
微信小程序点击保存图片到本机功能
Dec 13 Javascript
JavaScript 链表定义与使用方法示例
Apr 28 Javascript
jQuery cookie的公共方法封装和使用示例
Jun 01 jQuery
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中定时计划任务的实现原理
2013/01/08 PHP
设置php页面编码的两种方法示例介绍
2014/03/03 PHP
PHP四种基本排序算法示例
2015/04/09 PHP
php array_slice 取出数组中的一段序列实例
2016/11/04 PHP
Thinkphp整合阿里云OSS图片上传实例代码
2019/04/28 PHP
php中的钩子理解及应用实例分析
2019/08/30 PHP
TNC vs IO BO3 第一场2.13
2021/03/10 DOTA
使用jQuery操作Cookies的实现代码
2011/10/09 Javascript
javascript之典型高阶函数应用介绍
2013/01/10 Javascript
基于javascript制作微信聊天面板
2020/08/09 Javascript
js中作用域的实例解析
2017/03/16 Javascript
webpack组织模块打包Library的原理及实现
2018/03/10 Javascript
p5.js入门教程之小球动画示例代码
2018/03/15 Javascript
使用validate.js实现表单数据提交前的验证方法
2018/09/04 Javascript
vue中destroyed方法的使用说明
2020/07/21 Javascript
vue中选中多个选项并且改变选中的样式的实例代码
2020/09/16 Javascript
Python的自动化部署模块Fabric的安装及使用指南
2016/01/19 Python
Python数据分析之获取双色球历史信息的方法示例
2018/02/03 Python
Python 通过微信控制实现app定位发送到个人服务器再转发微信服务器接收位置信息
2019/08/05 Python
Pandas实现一列数据分隔为两列
2020/05/18 Python
在HTML5 Canvas中放入图片和保存为图片的方法
2014/05/03 HTML / CSS
AmazeUI 折叠面板的实现代码
2020/08/17 HTML / CSS
伦敦最有品味的百货:Liberty London
2016/11/12 全球购物
Omio西班牙:全欧洲低价大巴、火车和航班搜索和比价
2017/02/11 全球购物
加拿大的标志性百货公司:Hudson’s Bay(哈得逊湾)
2019/09/03 全球购物
梅西百货官网:Macy’s
2020/08/04 全球购物
SQL Server的固定数据库角色都有哪些?对应的服务器权限有哪些?
2013/05/18 面试题
观看《永远的雷锋》心得体会
2014/03/12 职场文书
给公司的建议书范文
2014/05/13 职场文书
银行竞聘报告范文
2014/11/06 职场文书
幼儿园新生开学寄语
2015/05/27 职场文书
消防宣传语大全
2015/07/13 职场文书
合理缓解职场压力,让你随时保持最佳状态!
2019/06/21 职场文书
Django路由层如何获取正确的url
2021/07/15 Python
AudioContext 实现音频可视化(web技术分享)
2022/02/24 Javascript
MySQL安装失败的原因及解决步骤
2022/06/14 MySQL