前端大文件分片上传 - ToB企服应用市场:ToB评测及商务社交产业平台

//文件切片，utils
import SparkMD5 from 'spark-md5'
export async function getChunkList (files) {
const file = files
console.log(file);
const fileSize = file.size // 文件大小
const fileName = file.name
let chunkSize = 0;
if (fileSize <= 5 * 1024 * 1024) { // 0-5M，不分片
chunkSize = fileSize;
} else if (fileSize <= 20 * 1024 * 1024) { // 5-20M，每个分片大小1M
chunkSize = 1024 * 1024;
} else if (fileSize <= 50 * 1024 * 1024) { // 20-50M，每个分片大小2M
chunkSize = 2 * 1024 * 1024;
} else if (fileSize <= 100 * 1024 * 1024) { // 50-100M，每个分片大小4M
chunkSize = 4 * 1024 * 1024;
} else if (fileSize <= 200 * 1024 * 1024) { // 100-200M，每个分片大小6M
chunkSize = 6 * 1024 * 1024;
} else if (fileSize <= 500 * 1024 * 1024) { // 200-500M，每个分片大小10M
chunkSize = 10 * 1024 * 1024;
} else if (fileSize <= 1024 * 1024 * 1024) { // 500M-1G，每个分片大小20M
chunkSize = 20 * 1024 * 1024;
} else { // 1G以上，每个分片大小20M
chunkSize = 20 * 1024 * 1024;
}
const totalChunks = Math.ceil(fileSize / chunkSize)
let start = 0
let end = Math.min(chunkSize, fileSize)
let index = 0 // 分片索引,从0开始
const chunks = [] // 存储当前文件的分片信息的数组
while (start < fileSize) {
const chunk = file.slice(start, end)
const reader = new FileReader()
const promise = new Promise((resolve, reject) => {
reader.onload = (e) => { //读取文件分片信息，使用SparkMD5库计算分片的MD5值
const spark = new SparkMD5.ArrayBuffer()
spark.append(e.target.result)
resolve(spark.end())
}
reader.onerror = (err) => {
reject(err)
}
})
reader.readAsArrayBuffer(chunk)
try {
const md5 = await promise
const chunkInfo = { chunk, md5, index }
chunks.push(chunkInfo)
} catch (err) {
reject(err)
}
//更新循环起止位置
start = end
end = Math.min(start + chunkSize, fileSize)
index++
}
// 将当前文件的分片信息数组存入总的数组中
return [chunks, totalChunks, fileSize, fileName, chunkSize] // 返回存储所有文件的分片信息的数组
}

复制代码

async handleUpload () {
this.progressState = 'upload'
this.wrongNum = 0
if (this.fileList.length == 0) { //判断是否添加文件
this.$notify.warning({
title: this.$global.warningMessage.title,
message: this.$global.warningMessage.fileMessage,
});
return
}
if (this.file.name.length > 256) {
this.$notify.warning({
title: this.$global.warningMessage.title,
message: this.$global.warningMessage.fileNameMessage,
});
return
}
this.totalSize = this.file.size
// 调用getChunkList方法获取分片及相关信息
const [chunks, totalChunks, fileSize, fileName, chunkSize] = await getChunkList(this.file.raw)
this.totalChunks = totalChunks
this.fileSize = fileSize
this.fileName = fileName
this.chunkList = chunks
this.chunkSize = chunkSize
console.log(this.chunkList);
// 开始上传请求
await this.startUpload()
// 遍历分片信息数组，取出除文件分片外的其他信息
const sessionChunkList = this.chunkList.map(({ chunk, ...rest }) => rest);
// 将分片其他信息存入sessionStorage中
sessionStorage.setItem("chunkData", JSON.stringify(sessionChunkList));
let i = 0;
while (i < this.chunkList.length && this.wrongNum < 1) { //对分片数组进行遍历
const chunkInfo = this.chunkList[i];
const res = await this.uploadChunk(chunkInfo); //调用上传分片方法
if (res.data.state == 200) {
const removeInfo = {
md5: chunkInfo.md5,
index: chunkInfo.index
}
await this.handleSuccess(removeInfo, chunkInfo) //调用当前分片上传成功处理函数
i++;
} else { //上传未成功，重新上传一次
const res = await this.uploadChunk(chunkInfo);
this.wrongNum += 1
if (res.data.state == 200) {
this.wrongNum = 0
await this.handleSuccess(removeInfo, chunkInfo)
i++;
} else { // 重新上传一次后仍未成功
const state = this.$global.completeUploadState.cancelUpload
await this.completeUpload(state)
this.$notify.error({
title: this.$global.failedMessage.title,
message: res.data.message
});
this.handleClear()
return
}
}
}
}

复制代码