大文件分片上传原理分析

想简单来可以直接用 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)