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

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

<template><div><input type="file" @change="handleUpload" /></div>
</template><script setup>
import { ref } from 'vue';
const file = ref(null);
const chunk_size=1024*1024//每一个切片的大小（1M）
const chunks=ref([])//存储所有的切片
//文件上传函数
const handleUpload= async (e) => {const selectedFile = e.target.files[0]; // 拿到选择的文件的 files 文件数据if (!selectedFile ) return;file.value = selectedFile;fileName.value= selectedFile.name//存储文件名调用文件切片函数chunks.value = createFileChunk ()调用hash函数const hash = await calculateHash()fileHash.value=hash//存储文件hash
}
//文件切片函数
const createFileChunk = () => {let cur = 0//分片的下标let fileChunkList=[]//接收所有的分片//开始遍历文件while(cur < file.value.size){const blob = file.value.slice(cur,cur+chunk_size)//这里使用slice()方法进行剪切，值为开始下标和结束下标fileChunkList.push(blob)cur+=chunk_size//更新下标}return fileChunkList//向外抛出所有的切片
}</script>

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, // 文件hashchunkHash: `${fileHash.value}-${index}`, // 文件切片hashchunk};});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<Response>[] = []; // 请求池(当前正在处理的请求)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); // 确保所有请求都已完成
};