大文件上传的解决办法~文件切片、秒传、限制文件并发请求。。。

1、项目背景：针对大文件上传，如果将文件作为一个请求去发送给后端，会有以下几种问题，首先是上传时间长，用户不能进行其他操作，包括页面刷新等操作，其次有的接口会设置响应时间限制，可能大文件还没上传完就触发响应限制了，这样对用户很不友好，那么怎么解决呢？

2、首先前端针对大文件使用文件切片技术，将大文件切成多个小文件，然后再将多个小文件传给后端，由后端进行组合即可。（文件切片）

3、依据文件内容生成唯一的hash值，可以避免文件改名后重复上传的问题。

这里，我们使用 spark-md5.min.js 来根据文件的二进制内容计算文件的 hash值。用来实现秒传

引入spark-md5.min.js
import SparkMD5 from 'spark-md5'
//计算文件hash值
const calculateHash = () => {
    return Promise(resolve=>{
        1、第一个和最后一个切片全部参与计算。
        2、中间的切片只计算前面2个字节、中间2个字节、最后2给字节。
        const targets:Blob=[]//存储所有参与计算的切片
        const spark=new SparkMD5.ArrayBuffer()
        const fileReader=new FileReader()
        chunks.value.forEach((chunk,index)=>{
            if(index===0 || index===chunks.length-1){
                1、第一个和最后一个切片全部参与计算。
                targets.push(chunk)
            } else{
                2、中间的切片只计算前面2个字节、中间2个字节、最后2给字节。
                targets.push(chunk.slice(0,2)//前面2个字节
                targets.push(chunk.slice(chunk_size/2,chunk_size/2+2)//中间2个字节
                targets.push(chunk.slice(chunk_size-2,chunk_size)//后面2个字节
            }
        })
        fileReader.readAsArrayBuffer(new Blob(targets))
        fileReader.onload=(e)=>{
            spark.append((e.target as FileReader).result)
            console.log('hash值',spark.end())
            resolve(spark.end())
        }
    })
}

4、前面我们完成了文件上传的准备工作，下面写文件上传：

const fileHash = ref('');
const fileName = ref('');

const uploadChunks = async (chunks: Blob[]) => {
    const data = chunks.map((chunk, index) => {
        return {
            fileHash: fileHash.value, // 文件hash
            chunkHash: `${fileHash.value}-${index}`, // 文件切片hash
            chunk
        };
    });

    const formDatas = data.map(item => {
        const formData = new FormData();
        formData.append('chunk', item.chunk);
        formData.append('chunkHash', item.chunkHash);
        formData.append('fileHash', item.fileHash);
        return formData;
    });

    const max = 6; // 最大并发请求数
    let index = 0;
    const taskpool: Promise[] = []; // 请求池(当前正在处理的请求)

    while (index < formDatas.length || taskpool.length > 0) { // 代表文件未上传完或仍有请求在处理
        if (index < formDatas.length) {
            const task = fetch('upload', { method: 'POST', body: formDatas[index] }); // 发送请求
            taskpool.push(task); // 将新的请求（Promise）添加到 taskpool 中
            index++;
        }

        if (taskpool.length >= max) {
            const completedTask = await Promise.race(taskpool); // 等待 taskpool 中任意一个请求完成，然后继续循环
            taskpool.splice(taskpool.indexOf(completedTask), 1); // 将已完成的请求从任务池中移除
        }
    }

    await Promise.all(taskpool); // 确保所有请求都已完成
};