大文件切片上传
Posted PromiseOne
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了大文件切片上传相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>切片上传</title>
</head>
<body>
<script src="https://cdn.bootcdn.net/ajax/libs/spark-md5/3.0.2/spark-md5.min.js"></script>
<input type="file">
<script>
const inp = document.querySelector(\'input\');
inp.onchange = async (ev) =>
const file = inp.files[0];
if (!file)
return;
const chunks = createChunks(file, 10 * 1024 * 1024);
const result = await hash(chunks);
console.log(result);
console.log(chunks);
function hash(chunks)
return new Promise(resolve =>
const spark = new SparkMD5();
function _read(i)
if (i >= chunks.length)
resolve(spark.end());
return; // 读取完成
const blob = chunks[i];
const reader = new FileReader();
reader.onload = ev =>
const bytes = ev.target.result; // 读取到的字节数组
spark.append(bytes);
_read(i + 1)
reader.readAsArrayBuffer(blob);
_read(0);
)
function createChunks(file, chunkSize)
const result = [];
for (let i = 0; i < file.size; i += chunkSize)
result.push(file.slice(i, i + chunkSize))
return result;
</script>
</body>
</html>
大文件上传
大文件上传和断点续传
步骤：
- 通过input得到文件file
- 通过文件内容生成md5码
- 给服务端发起检验，检测该文件是否被上传过（有缓存），如果有就直接返回，无需重新上传
- 如果文件没有上传过，就继续文件切片，如果上传过一部分，就将已上传切片chunk的md5做一个返回，以便做断点上传，进行文件切片
- 通过文件切片，生成多个chunk，每个chunk都有单独的md5码，获取已经上传切片chunk的md5码，进行过滤，将已经上传好的，就不再进行上传，只上传没有上传过的，即是对文件切片做一个整合
- 开启前端上传线程
- 在文件上传的时候，每个切片会调用upload的接口，将切片上传到服务端
- 服务端会将切片文件转移到以文件md5码命名的资源目录中去
- 当前端上传结束之后，前端发起一个merge请求，告诉后端md码切片的文件已经上传完了，现在需要做一个合并
- 服务端将所有的内容做一个拼接合并（合并顺序为前端在文件切片步骤时给每个chunk的脚标定flag）
- 合并之后会得到一个完整的文件，放入资源目录，将所有切片和以md5命名的文件夹删除，做一个完整的文件导出
以上是关于大文件切片上传的主要内容，如果未能解决你的问题，请参考以下文章
关于elementt的upload图片上传标签的解读，上传视频。上传大文件切片——生成一个哈希值，Message的消息提示。