JS大文件分片上传实现详解：AbortController与分片策略

掌握AbortController

AbortController接口代表一个控制对象，允许在需要时中止一个或多个Web请求。

利用该接口可实现取消或中断请求的功能。

axios.abort()的底层实现即为此机制。

了解

fse = require('fs-extra')

概述

文件分片上传的原理是将文件转换为ArrayBlob形式，利用file（blob）的slice方法将文件拆分为多个部分，按顺序传输至服务端，传输完成后调用服务端的merge合并接口，由服务端完成文件合并。

服务端实现原理为：上传前创建文件夹（命名可参考提供的代码），随后通过fse的写入方法将获取的文件写入创建的文件夹中，并保持相应排序。最后通过合并方法将文件合并为一个完整文件。

深入学习

客户端

getChunkListAndFileMd5函数

该函数用于生成分片数组及生成Hash签名。

生成分片列表数组，采用file.prototype.slice方法。为解决兼容性问题，使用的代码如下：

export function getBlobSlice() {
    return (File.prototype.slice ||
        File.prototype.mozSlice ||
        File.prototype.webkitSlice);
}

生成分片：getBlobSlice.call(file,start,end)。其中start、end分别为起始位置和终点位置，确定分片大小即可计算start和end。

接下来开始，定义size为5M，代码如下

const DEFAULT_CHUNK_SIZE = 5 * 1024 * 1024;

定义一个对象保存默认配置：

const DEFAULT_OPTIONS = {
    chunkSize: DEFAULT_CHUNK_SIZE,
};

定义分片编号，初始值为0。定义chunkSize保存上述定义的分片大小常量。

let currentChunk = 0;
const chunkSize = this.fileUploaderClientOptions.chunkSize; 

接下来计算所需分片数量，公式为：文件总大小/每个分片大小。结果可能为小数，为确保分片完整，需向上取整。

const chunks = Math.ceil(file.size / chunkSize);

定义一个函数来加载分片，代码如下：

function loadNextChunk() {
    const start = currentChunk * chunkSize;
    const end = start + chunkSize >= file.size ? file.size : start + chunkSize;
    const chunk = blobSlice.call(file, start, end);
    chunkList.push(chunk);
    fileReader.readAsArrayBuffer(chunk);
}

解析该函数：

1.计算start位置，这不难理解。

2.计算end位置，此处需判断两种情况：

文件尺寸较小，小于分片大小，直接取文件尺寸。

最后一个切片，大小可能小于分片尺寸，直接取文件大小的位置。

3.调用上述函数实现分片，并获取当前分片。

4.将当前分片push到数组中。

5.调用fileReader.readAsArrayBuffer方法读取分片。（当前分片为blob实例，通过此方法可读取其内容）。 接下来看看fileReader的相关机制。

认识FileReader

若不懂fileReader，可先查阅文档，了解其方法。

FileReader对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用File或Blob对象指定要读取的文件或数据。 其中File对象可以是

• 来自用户在元素上选择文件后返回的FileList对象
• 也可以来自拖放操作生成的DataTransfer对象，
• 还可以来自在HTMLCanvasElement上执行mozGetAsFile()方法后返回的结果。

FileReader可在Web Worker中使用。（重要，可极大程度解决性能问题）

此处因用到FileReader的方法，故重点讲解该对象的方法。

• FileReader.abort();中止读取操作。
• FileReader.readAsArrayBuffer();开始读取指定Blob中的内容，完成后，result属性中保存的是被读取文件的ArrayBuffer数据对象。
• FileReader.readAsDataURL();开始读取指定Blob中的内容。完成后，result属性中将包含一个data:URL格式的Base64字符串以表示所读取文件的内容。
• FileReader.readAsText();开始读取指定Blob中的内容。完成后，result属性中将包含一个字符串以表示所读取的文件内容。

目前需读取分片内容，且需要ArrayBuffer格式，因此创建FileReader对象实例，并使用readAsArrayBuffer方法读取文件，通过onload事件监听，获取最终结果。代码如下：

const fileReader = new FileReader();
fileReader.onload = function (e) {
    // 我们读取到的结果是 e.target.result
}
fileReader.onerror = function (e) {
    // 这里表示读取失败
}

上述loadNextChunk函数中调用了此方法。

fileReader.readAsArrayBuffer(chunk);

使用md5实现签名

用到了spark-md5这个第三方库。主要使用的方法是生成md5编码。

npm install --save spark-md5

npmjs中的spark-md5

github

这是一个处理分片的库。提供了方法：

const spark = new SparkMD5.ArrayBuffer();

将分片v添加到对象中

spark.append(v)

最终结果返回

const result = spark.end()

uploadFile函数

该函数用于上传文件。

首先获取上述函数得到的值md5、chunkList。

const { md5, chunkList } = yield this.getChunkListAndFileMd5(file);

上传文件前，需调用接口初始化文件分片上传，此处即调用初始化文件分片上传的接口requestOptions.initFilePartUploadFunc。

yield requestOptions.initFilePartUploadFunc();

该接口在后端的实现即创建好一个文件夹用来保存分片，此处不多赘述，后续在学习Server代码时细讲。 接下来开始上传我们的分片，上传方法requestOptions.uploadPartFileFunc：

for (let index = 0; index < chunkList.length; index++) {
    try {
        yield requestOptions.uploadPartFileFunc(chunkList[index], index);
    }
    catch (e) {
        console.warn(`${index} part upload failed`);
        retryList.push(index);
    }
}

注意：无法保证全部顺利上传，若中间出现问题中断了上传等，我们如何处理？

此处使用retryTimes来获取需要重新上传的列表。

for (let retry = 0; retry < requestOptions.retryTimes; retry++) {
    if (retryList.length > 0) {
        console.log(`retry start, times: ${retry}`);
        for (let a = 0; a < retryList.length; a++) {
            const blobIndex = retryList[a];
            try {
                yield requestOptions.uploadPartFileFunc(chunkList[blobIndex], blobIndex);
                retryList.splice(a, 1);
            }
            catch (e) {
                console.warn(`${blobIndex} part retry upload failed, times: ${retry}`);
            }
        }
    }
}

最后调用上传结束的接口requestOptions.finishFilePartUploadFunc(md5)，该接口主要通知服务端分片都上传完了，服务端可进行文件合并，最终将分片合并成一个文件。

if (retryList.length === 0) {
    return yield requestOptions.finishFilePartUploadFunc(md5);
}
else {
    throw Error(`upload failed, some chunks upload failed: ${JSON.stringify(retryList)}`);
}

至此，客户端的操作完毕！

完整代码

以上就是一文带你彻底搞懂JS大文件分片上传实现的详细内容，更多关于JS大文件分片上传的资料请关注本站其它相关文章！