基于node实现文件上传和下载

本文主要讲述基于node如何实现文件上传和下载,分成原生node实现版、中间件实现版。

1、文件上传为什么需要使用multipart/form-data编码类型?

The encoding type application/x-www-form-urlencoded is inefficient for sending large quantities of binary data or text containing non-ASCII characters. Thus, a new media type,multipart/form-data, is proposed as a way of efficiently sending the values associated with a filled-out form from client to server.

文档大概意思是说application/x-www-form-urlencoded不适合用于传输大型二进制数据和包含非ASCII字符的文本,因此提出了一个新的MIME类型multipart/form-data,有效地将与填写的表单相关联的值从客户端发送到服务器。想了解很多MIME类型,点击查看

2、文件对象介绍

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
  <form method="POST" id="uploadForm" enctype="multipart/form-data">
    <input type="file" id="file" name="file" />
  </form>
  
  <button id="submit">submit</button>
</body>
</html>
<script>
  $("#submit").click(function() {
      console.log($("#file")[0].files[0])
  });
</script>

image.png

文件(File)接口提供有关文件的信息,并允许网页中的 JavaScript 访问其内容。

File 对象是特殊类型的 Blob,且可以用在任意的 Blob 类型的 context 中。比如说, FileReader, URL.createObjectURL(), createImageBitmap(), 及 XMLHttpRequest.send() 都能处理 Blob 和 File。

另外还有一个blob对象,也附上一张chrome浏览器的截图。blob,二进制大文档存储

两个对象里面都有size和type,按照官方的文档,file集成了blob,而且可以使用slice方法.

slice方法可以在当前的blob数据中,取出一段数据,作为新的blob。常用的就是文件断点上传。

3、node中的buffer、Stream、fs模块介绍

JavaScript语言没有用于读取或处理二进制数据流的机制。

但在处理像TCP流或文件流时,必须使用到二进制数据。因此在 Node.js中,定义了一个 Buffer 类,该类用来创建一个专门存放二进制数据的缓存区。

在 Node.js 中,Buffer 类是随 Node 内核一起发布的核心库。Buffer 库为 Node.js 带来了一种存储原始数据的方法,可以让 Node.js 处理二进制数据,每当需要在 Node.js 中处理I/O操作中移动的数据时,就有可能使用 Buffer 库。原始数据存储在 Buffer 类的实例中。一个 Buffer 类似于一个整数数组,但它对应于 V8 堆内存之外的一块原始内存(buffer 是 C++ 层面分配的,所得内存不在 V8 内)

const Buffer = require('buffer').Buffer
var buf1 = Buffer.from('tést');
var buf2 = Buffer.from('tést', 'latin1');
var buf3 = Buffer.from([1, 2, 3]);
console.log(buf1, buf2, buf3);

输出的结果为:

<Buffer 74 c3 a9 73 74> <Buffer 74 e9 73 74> <Buffer 01 02 03>

不是说node引入buffer是来处理二进制数据流吗?怎么转换成buffer对象打印出来却不是二进制,而是十六进制呢?

在计算机内使用二进制表示数据,一个存储空间叫做一个 bit ,只能存储 0 或是 1。 通常,计算机把 8 个bit作为一个存储的单位,称为一个 Byte。
于是一个 Byte 可以出现 256 种不同的情况。

一个 Buffer 是一段内存,比如大小为 2(Byte)的buffer,一共有 16 bit ,比如是00000001 00100011,可是这样显示太不方便。所以显示这段内存的数据的时候,用其对应的 16 进制就比较方便了,是01 23,之所以用 16 进制是因为转换比较方便。

内存仅仅存储的是二进制的数据,但是如何解释就是我们人类自己的事情了。。。。比如A在 内存中占用两个Byte,对应的内存状态是0000000 01000001,而uint16(JS不存在这个类型) 类型的65对应的存储内存的状态也是这个。

如果输出 Buffer 那么nodejs 输出的是内存实际存储的值(因为你没有给出如何解释这段内存中的数据),可是二进制显示起来不方便看,所以转换为 16 进制方便人类阅读。
如果转换为数组,那么意思就是把这个 buffer 的每一个字节解释为一个数字(其实是10进制数字,这是人类最方便的),所以是 0~255 的 10 进制数字。
总之,这样转化的目的是方便显示和查看。

Stream是一个抽象接口,Node中有很多对象实现了这个接口。例如,对http服务器发起请求的request对象和服务端响应对象response就是Stream,还有stdout(标准输出)。

你可以把流理解成一种传输的能力。通过流,可以以平缓的方式,无副作用的将数据传输到目的地。Stream表示的是一种传输能力,Buffer是传输内容的载体 (可以这样理解,Stream:外卖小哥哥, Buffer:你的外卖)

在node中流无处不在:
image

流为什么这么好用还这么重要呢?

现在有个需求,我们要向客户端传输一个大文件。每次接收一个请求,就要把这个大文件读入内存,然后再传输给客户端。

const fs = require('fs');
const server = require('http').createServer();

server.on('request', (req, res) => {
    fs.readFile('./big.file', (err, data) => {
        if (err) throw err;
        res.end(data);
    });
});

server.listen(8000);

通过这种方式可能会产生以下三种后果:

  • 内存耗尽
  • 拖慢其他进程
  • 增加垃圾回收器的负载

所以这种方式在传输大文件的情况下,不是一个好的方案。并发量一大,几百个请求过来很容易就将内存耗尽。

如果采用流呢?

const fs = require('fs');
const server = require('http').createServer();

server.on('request', (req, res) => {
    const src = fs.createReadStream('./big.file');
    src.pipe(res);
});

server.listen(8000);

采用这种方式,不会占用太多内存,可以将文件一点一点读到内存中,再一点一点返回给用户,读一部分,写一部分。(利用了 HTTP 协议的 Transfer-Encoding: chunked 分段传输特性),用户体验得到优化,同时对内存的开销明显下降。如果想在传输的过程中,想对文件进行处理,比如压缩、加密等等,也很好扩展。

未完待续。。。

参考文献:
buffer概述:
http://www.runoob.com/nodejs/nodejs-buffer.html
https://nodejs.org/api/buffer.html#buffer_buffer
buffer数据显示:
https://segmentfault.com/q/1010000009002065

stream运行机制:
https://www.php.cn/js-tutorial-412138.html
stream的理解:
https://www.jianshu.com/p/4eb9077a8956

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章