实际项目中遇到需要上传几十个G的3d模型文件，传统上传就不适用了。
结合element提供的上传组件自己封装了文件分片上传的组件。
思路：
Vue3+Ts+Element-Plus
其他库：spark-md5
后端接口：
Element组件基础配置
<el-upload drag :file-list="fileList" :on-change="onUpload" :auto-upload="false" ref="uploadfile" :limit="1" :show-file-list="false" ></el-upload>
这里有个点：必须要定义file-list属性，不然clearFiles等官方外部方法没有效果
核心方法就是onUpload
const onUpload = async (File:any) => {
const chunkSize = 30 * 1024 * 1024; // 分片大小
const file = File.raw // 文件
const fileSize = File.size // 文件大小
let chunkCount = Math.ceil(fileSize / chunkSize) // 分片数量
if(chunkSize > fileSize){ // 文件过小就一片
chunkCount = 1
}
// 文件md5，给文件一个唯一标识
const fileMd5 = await getFileMd5(file, chunkCount, chunkSize);
// 上传分片
for( let i=0;i<chunkCount;i++) {
const start = i * chunkSize //分片开始
const end = Math.min(fileSize, start + chunkSize) // 分片结束
const _chunkFile = File.raw.slice(start, end) // 分片文件
// 定义分片上传接口参数，跟后端商定
const formdata = new FormData()
formdata.append('chunkNumber', i.toString())
formdata.append('chunkSize', _chunkFile.size)
formdata.append('file', _chunkFile)
formdata.append('fileName', File.name)
formdata.append('fileSign', fileMd5)
formdata.append('totalChunks', chunkCount.toString())
formdata.append('totalChunkSize', fileSize)
// 检查分片文件是否上传-没有上传则上传
const params = { chunkNumber: i, fileSign: fileMd5 }
const { data } = await checkChunkFile(params) // 检验接口-自己定义
if(!data.flag){
console.log("开始上传第" + i + "个分片")
await uploadChunkFile(formdata) // 上传接口-自己定义
}
}
// 合并
const mergeData = { // 合并参数
fileName: File.name,
fileSign: fileMd5,
...
}
mergeFile(mergeData)// 合并接口-自己定义
}
getFileMd5方法生成文件md5
const getFileMd5 = (file: File, chunkCount: number, chunkSize: number) => {
return new Promise((resolve, reject) => {
const blobSlice = File.prototype.slice
const chunks = chunkCount
let currentChunk = 0
const spark = new SparkMD5.ArrayBuffer()
const fileReader = new FileReader()
fileReader.onload = e => {
spark.append(e.target?.result)
currentChunk ++
if(currentChunk < chunks){
loadNext()
} else {
const md5 = spark.end()
resolve(md5)
}
}
fileReader.onerror = e => {
reject(e)
}
function loadNext () {
const start = currentChunk * chunkSize
let end = start + chunkSize
if(end > file.size){
end = file.size
}
fileReader.readAsArrayBuffer(blobSlice.call(file, start, end))
}
loadNext()
})
}
getFileMd5 方法是同步任务，文件过大会等待很久，可对页面进行优化处理，不然会造成卡着没进行请求的错觉。
至于其他进度条、组件参数等代码忽略掉了，可根据实际情况设计。
上面的核心代码很多内容是还可以拆分的，优化空间很大。
该组件是一个一个分片的上传，去掉await 就可以测试多个文件上传。
