文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Node.js 中怎么向HTTP服务器中上传文件和图片

2024-04-02 19:55

关注

这期内容当中小编将会给大家带来有关Node.js 中怎么向HTTP服务器中上传文件和图片,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

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模块保存了文件。

上述就是小编为大家分享的Node.js 中怎么向HTTP服务器中上传文件和图片了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-服务器
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯