React+EggJs实现断点续传的示例代码
140 浏览量
2020-10-15
03:53:36
上传
评论 1
收藏 72KB PDF 举报
React+EggJs实现断点续传的示例代码实现断点续传的示例代码
主要介绍了React+EggJs实现断点续传的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工
作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
技术栈技术栈
前端用了React，后端则是EggJs，都用了TypeScript编写。
断点续传实现原理断点续传实现原理
断点续传就是在上传一个文件的时候可以暂停掉上传中的文件，然后恢复上传时不需要重新上传整个文件。
该功能实现流程是先把上传的文件进行切割，然后把切割之后的文件块发送到服务端，发送完毕之后通知服务端组合文件块。
其中暂停上传功能就是前端取消掉文件块的上传请求，恢复上传则是把未上传的文件块重新上传。需要前后端配合完成。
前端实现前端实现
前端主要分为：切割文件、获取文件MD5值、上传切割后的文件块、合并文件、暂停和恢复上传等功能。
切割文件：这个功能点在整个断点续传中属于比较重要的一环，这里仔细说明下。我们用ajax上传一个大文件用的时间会比较
长，在上传途中如果取消掉请求，那在下一次上传时又要重新上传整个文件。而通过把大文件分解成若干个文件块去上传，这
样在上传中取消请求，已经上传的文件块会保存到服务端，下一次上传就只需要上传其他没上传成功的文件块(不用传整个文
件)。
这里把文件块放入一个fileChunkList数组，方便后面去获取文件的MD5值、上传文件块等。
// 使用HTML5的file.slice对文件进行切割，file.slice方法返回Blob对象
let start = 0;
while (start < file.size) {
fileChunkList.push({ file: file.slice(start, start + CHUNK_SIZE) });
start += CHUNK_SIZE;
}
获取文件MD5值：我们不能通过文件名来判断服务端是否存在上传的文件，因为用户上传的文件很可能会有重名的情况。所
以应该通过文件内容来区分，这样就需要获取文件的MD5值。
使用spark-md5模块获取文件的MD5值。模块详情点击这里
// 部分代码展示
let spark = new SparkMD5.ArrayBuffer();
let fileReader = new FileReader();
fileReader.onload = e => {
if (e.target && e.target.result) {
count++;
spark.append(e.target.result as ArrayBuffer);
}
if (count < totalCount) {
loadNext();
} else {
resolve(spark.end());
}
};
function loadNext() {
fileReader.readAsArrayBuffer(fileChunkList[count].file);
}
loadNext();
上传切割后的文件块：根据前面的fileChunkList数组，使用FormData上传文件块。
// 部分代码展示
Axios.post(uploadChunkPath, formData, {
headers: { 'Content-Type': 'multipart/form-data' },
cancelToken: source.token,
}).then(()=>{
// ...
})
合并文件：就是等所有文件块上传成功后发送ajax通知服务端，让服务端把文件块进行合并。
// 部分代码展示
Axios.get(mergeChunkPath, {
params: {
fileHash: targetFile,
资源评论
