大文件分片上传原理分析

Qin__

已于 2024-04-09 17:51:32 修改

阅读量353

点赞数 3

文章标签： spark-md5 前端

于 2024-04-07 15:22:42 首次发布

本文链接：https://blog.csdn.net/Uookic/article/details/137462622

版权

想简单来可以直接用 vue-simple-upload（断点续传，重传，多文件上传,错误处理等）功能齐全，本文意在梳理大文件上传原理

大致思路就是—上传文件----把文件切片----把单文件传输给后端-----后端组合切片为完整文件。
注：这里的切片（blob类型只保存文件基本信息）不是读取后的字节文件，获取切片只是简单的数学算法，所以计算切片的速度会比较快

分片上传解决的问题

大文件上传时，网络断开整个文件需要重新上传，用户等待时间过长，体验感差

获取文件的所有切片

// chunkSize 切片大小
function createChunks(file, chunkSize) {
    const result = [];
    // i += chunkSize 每取完一个增加一个切片的长度
    for (let i = 0; i < file.size; i += chunkSize) {
        result.push(file.slice(i, i + chunkSize));
    }
    return result;//返回所有数组切片
}

const inp = document.querySelector('input');
inp.onchange = (e) => {
    const file = inp.files[0];
    if (!file) {
        return;
    }
    console.log(file.slice(0, 100));// 取0-99字节 返回blob类型
    const chunks = createChunks(file, 1 * 1024 * 1024);// 1M
    console.log(chunks);
};

问题思考，当网络断开，如何接着之前传的片段继续传
解决：前端需要定义文件有唯一hash ID。这里可以约定，比如前端可以用spark-md5。浏览器发起请求询问服务器，这个大文件hash ID我还需要传递哪些分片, 后端可以根据ID判断这个文件有没有上传过，还有多少需要上传

下载spark-md5并引用

这里要注意我们在对文件进行加密的时候不要直接用整个文件，因为计算hash值需要拿到文件数据，把整个大文件放进内存计算hash值执行很慢，也会引起崩溃（100G之类），需要在截取以后取出分片进行加密

<body>
<input type="file"/>
<script src="spark-md5.js"></script>
<script>
function createChunks(file, chunkSize) {
	.....
}
//获取整个文件hash
function hashID(chunks){
const spark = new SparkMD5()
function _read(i){
	if(i >= chunks.length){//大于分片长度时结束计算
		console.log(spark.end());
		return;
	 }
	 const blob = chunks[i];
	 const fileReader = new FileReader();// 文件读取类
	 //读取是异步的
	 fileReader.onload = e => {
	     const bytes = e.target.result // 返回要加密的片段
	     spark.append(bytes)//把字节加入hash运算
	     _read(i+1);
    }
     fileReader.readAsArrayBuffer(blob)   
	}
	_read(0)
}
const inp = document.querySelector('input');
inp.onchange = (e) => {
    const file = inp.files[0];
    if (!file) {
        return;
    }
    console.log(file.slice(0, 100));// 取0-99字节 返回blob类型
    const chunks = createChunks(file, 1 * 1024 * 1024);// 1M
    hashID(chunks);//传入分片
};
</script>
</body>

思考，文件读取是异步的，所以需要用promise封装一下hashID的生成

<body>
<input type="file"/>
<script src="spark-md5.js"></script>
<script>
/**
获取一个分片
*/
function createChunks(file, chunkSize) {
	const result = [];
    // i += chunkSize 每取完一个增加一个切片的长度
    for (let i = 0; i < file.size; i += chunkSize) {
        result.push(file.slice(i, i + chunkSize));
    }
    return result;//返回所有数组切片
}
//获取整个文件hash
function hashID(chunks){
return new Promise(resolve=>{
	const spark = new SparkMD5()
	function _read(i){
	if(i >= chunks.length){//大于分片长度时结束计算
		resolve(spark.end());//返回promise
		return;
	 }
	 const blob = chunks[i];
	 const fileReader = new FileReader();// 文件读取类
	 //读取是异步的
	 fileReader.onload = e => {
	     const bytes = e.target.result // 返回要加密的片段
	     spark.append(bytes)//把字节加入hash运算
	     _read(i+1);
    }
     fileReader.readAsArrayBuffer(blob)   
	}
	_read(0)
})
}
const inp = document.querySelector('input');
inp.onchange = async (e) => {
    const file = inp.files[0];
    if (!file) {
        return;
    }
    console.log(file.slice(0, 100));// 取0-99字节 返回blob类型
    const chunks = createChunks(file, 1 * 1024 * 1024);// 1M
    //文件hash
    const resultID = await hashID(chunks);
};
</script>
</body>