有关大文件上传和下载相关知识的整合

一.前期准备

  做大文件上传和下载，是需要一定的知识储备的。其中综合了不少领域的知识点，很综合的一项技能，可以对技能做一次很好的整合。写一篇这样的文章，也很考验文字水平，希望这一篇文章之后，能够提升自己的理解程度，有一个比较深刻的印象。  说到文件，那肯定少不了前端中的文件（File）、二进制（Blob）、文件读取（FileReader）。大文件上传，一次性上传肯定是不现实的，需要对文件进行分片，然后后端获取后进行整合，那么，Blob.prototype.slice或者File.prototype.slice也是切片时必不可少的。  由于前端会将资源分块，然后单独发送请求，也就是说，原来 1 个文件对应 1 个上传请求，现在可能会变成 1 个文件对应 n 个上传请求（HTTP2的多路复用），所以前端可以基于 Promise.all将这多个接口整合，上传完成在发送一个合并的请求，通知服务端进行合并。合并时可通过 nodejs 中的读写流（readStream/writeStream），将所有切片的流通过管道（pipe）输入最终文件的流中。  而在发送请求资源时，前端会定好每个文件对应的序号（spark-md5），并将当前分块、序号以及文件 hash 等信息一起发送给服务端（由于计算内容的hash需要时间，还需要考虑 WebWorker），服务端在进行合并时，通过序号进行依次合并即可。  而一旦服务端某个上传请求失败，会返回当前分块失败的信息，其中会包含文件名称、文件 hash、分块大小以及分块序号等，前端拿到这些信息后可以进行重传，同时考虑此时是否需要将 Promise.all 替换为 Promise.allSettled 更方便。

二.相关知识点串讲

1.Blob，File以及FileReader

⑴. Blob：  Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。  Blob 表示的不一定是 JavaScript 原生格式的数据。File 接口基于 Blob，继承了 blob 的功能并将其扩展以支持用户系统上的文件。①要从其它非 blob 对象和数据构造一个 Blob，需使用 Blob() 构造函数：

let blob = new Blob( array, options );

②常用实例属性：

⑵. File：  通常情况下， File 对象是来自用户在一个 <input> 元素上选择文件后返回的 FileList 对象，也可以是来自由拖放操作生成的 DataTransfer 对象，或者来自 HTMLCanvasElement 上的 mozGetAsFile() API。  File 对象是特殊类型的 Blob，且可以用在任意的 Blob 类型的 context 中， Blob的方法都能被File使用。①File() 构造器创建新的 File 对象实例。

let myFile = new File(bits, name[, options]);

②常用实例属性：

⑶. FileReader：  FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。  其中 File 对象可以是来自用户在一个 <input> 元素上选择文件后返回的FileList对象，也可以来自拖放操作生成的 DataTransfer 对象，还可以是来自在一个 HTMLCanvasElement 上执行 mozGetAsFile() 方法后返回结果。①使用 FileReader() 构造器去创建一个新的 FileReader。

let reader = new FileReader();

②常用实例属性：

⑷.URL：

2.HTTP2的多路复用

  在 HTTP/2 中，有两个非常重要的概念，分别是帧（frame）和流（stream）。帧代表着最小的数据单位，每个帧会标识出该帧属于哪个流，流也就是多个帧组成的数据流。HTTP2 采用二进制数据帧传输，取代了 HTTP1.x 的文本格式，二进制格式解析更高效。多路复用代替了 HTTP1.x 的序列和阻塞机制，所有的相同域名请求都通过同一个 TCP 连接并发完成。同一 Tcp 中可以发送多个请求，对端可以通过帧中的标识知道属于哪个请求。通过这个技术，可以避免 HTTP 旧版本中的队头阻塞问题，极大的提高传输性能。

三.大文件上传

  实现大文件上传，需要前后端合作，以下主要讲前端方面需要实现的内容，后端简述思路为主，前端使用vue，后端为node。  前端部分理一下大概思路，首先需要解决的一次性上传大文件导致线程挂掉或者太慢的问题，解决方法就是对文件进行分片处理，并发上传。然后再实现断点续传，文件秒传，暂停上传，恢复上传等功能。期间需要考虑对性能的优化。

1.前端部分

先贴上基础的html代码：

<template>
   <div>
    <input type="file" @change="handleFileChange" />
    <el-button @click="handleUpload">upload</el-button>
  </div>
</template>
<script>
export default {
  data: () => ({
    container: {
      file: null
    }
  }),
  methods: {
     handleFileChange(e) {
      const [file] = e.target.files;
      if (!file) return;
      Object.assign(this.$data, this.$options.data());
      this.container.file = file;
    },
    async handleUpload() {}
  }
};
</script>

⑴如何做分片处理再合并发送?

设定好分片大小，有默认值，也可以参数传入。通过input的change事件获取file文件，再通过file.slice切割分片，通过spark-md5每个分片的内容转换为对应hash值，每次发送分片时携带对应hash值+对应分片下标作为唯一标识，使用promise.all发送ajax请求，成功之后再发送合并切片请求给后台，后台则开始处理合并操作。