大文件上传和下载解决方案

前言

前端处理 “大” 一直是一个痛点和难点，比如大文件、大数据量。虽然浏览器硬件有限，但是聪明的工程师总是能够最大化利用浏览器的能力和特性，优雅的解决一个个极端问题，满足用户的多样化需求。

断点上传

对于大文件，如果我们直接上传，用户网速够慢的话，可能需要等上几天几夜才能上传完成，这样的用户体验可能导致用户直接放弃，那么有没有一种方式能够更好的上传大文件呢？

首先我们可以想到一些浏览器常见的优化套路：

• 多线并行处理
• 缓存结果
• 按需使用

有了优化思路，那么看看浏览器支持能力：

• HTTP 1.x，浏览器可以并行处理请求，比如 Chrome 可以并行处理 6 个请求。HTTP 2.x，理论上可以无限制并行处理请求。
• 浏览器支持 WebWorker单独子线程来处理一些耗时任务。
• HTTP 没有状态，所以我们只能将状态缓存到服务器。

浏览器也提供了支持能力，那么我们怎么把一个文件并发上传，又如何做缓存呢？

文件切割和唯一标识

我们知道，计算机底层数据都是由 0 和 1 的二进制数据构成，文件也不例外，那么我们可以按照字节数将大文件切割成一个个小文件块，然后并行上传。但是切割之后的文件块是无法标识的，所以我们需要为文件确定一个唯一标识，我们常见会使用文件名来标识文件，但是文件名是可修改的，这样的标识是非常不可靠的，所以我们会基于文件内容来做一个标识，也就是计算文件的 md5 值，这样只要文件内容不修改，文件的 md5 值就不会变化。

//【前端代码】文件切割块和计算唯一标识
const CHUNK_SIZE = 10 * 1024 * 1024;
const slice = File.prototype.slice;
// 获取文件块
function getFileChunks(size: number) {const chunks = []const chunkCount = Math.ceil(size / CHUNK_SIZE)for (let i = 1; i < chunkCount; i++) {chunks.push(i * CHUNK_SIZE)}if (chunkCount) {chunks.push(size)}return chunks
}
// 计算 MD5 值
function computedMD5(file: File): Promise<string> {return new Promise((resolve, reject) => {const spark = new SparkMD5.ArrayBuffer()const reader = new FileReader()const chunks = getFileChunks(file.size)let currentChunk = 0reader.onload = (e: any) => {spark.append(e?.target?.result)currentChunk++if (currentChunk < chunks.length) {loadNext()} else {resolve(spark.end())}}reader.onerror = (error) => {console.error(error)reject('computed fail')}function loadNext() {const start =(Math.ceil(chunks[currentChunk] / CHUNK_SIZE) - 1) * CHUNK_SIZEconst end = chunks[currentChunk]reader.readAsArrayBuffer(slice.call(file, start, end))}loadNext()})
} 

我们通过文件大小和固定文件块大小来计算需要上传的文件块数量和每个块对应字节范围。然后使用 spark-md5库来计算文件的 md5 值，如果注意的是，如果文件较