vue3多文件大文件分片上传（spark-md5）
文件通过input上传到页面时对应使用spark-md5生成一个hash值，生成hash值之后分片（每个分片hash相同，索引不同），获取到hash值之后调用查询接口，查询文件对应哪些分片已经上传过，上传过的分片跳过，在所有文件分片上传完之后，还需要把分片的文件合并。文件使用spark-md5 获取hash值，文件内容不修改的话（文件名修改不影响hash值）获取的hash值是一致的，分片条件不变的
·
背景
上传文件是后台常用的功能，项目开始前，考虑了大文件是否需要分片上传，但是产品说了不用，没有那么大的文件需要上传。此处手动狗头，做项目还是要坚持自己的想法，一开始做功能前就考虑到会省很多事，但是没办法谁让产品在上游，于是骂骂咧咧开始迭代多个大文件分片上传…
功能预览图
分片了几个文件就需要再合并几个文件
思路
文件通过input上传到页面时对应使用spark-md5生成一个hash值，生成hash值之后分片（每个分片hash相同，索引不同），获取到hash值之后调用查询接口，查询文件对应哪些分片已经上传过，上传过的分片跳过，在所有文件分片上传完之后，还需要把分片的文件合并。直接看代码吧
代码
html
<div class="operate-btn-bar">
<div class="btn choice">
选择文件
<input
@change="choiceFileHandle"
ref=""
:value="choiceInputValue"
class="upload-input"
type="file"
multiple/>
</div>
<div
v-show="filesList.length !== 0"
class="btn upload"
@click="allUploadHandle"
v-throttle
>
全部上传
</div>
<!--
- ...
- ...
- ...
-->
<div class="next-bar">
<el-tooltip
class="box-item"
effect="dark"
:content="nextBtnTips"
placement="top-start"
:disabled="!nextBtnDisabled"
>
<div class="next-btn" :class="{'disabled':nextBtnDisabled}" @click="goNextHanlde" v-throttle>
<span>下一步</span>
<el-icon><ArrowRight /></el-icon>
</div>
</el-tooltip>
</div>
一、下载spark-md5
npm install spark-md5
npm install @types/spark-md5 -D
二、引入spark-md5
import SparkMD5 from 'spark-md5'
三、获取hash值
// 文件获取hash值
const getFileMD5 = (file:File) => {
return new Promise((resolve, reject) => {
const spark = new SparkMD5.ArrayBuffer()
const fileReader = new FileReader()
fileReader.onload = (e: ProgressEvent<FileReader>):void => {
spark.append(e.target?.result)
resolve(spark.end())
}
fileReader.onerror = () => {
reject('')
}
fileReader.readAsArrayBuffer(file)
})
}
四、定义类型
interface NewFileType extends File {
speep: number // 分片上传进度
progress: number // ui显示的进度值
fileId: string
// 整个文件上传的状态
state: {
state_txt: string;
tips_txt: string
}
// 文件hash
hash?: string
// 是否合并过
isMerge?: boolean
}
// 分片文件列表
interface FileSliceListType {
file: Blob
hash: string
chunkIndex: number
chunkCount: string
fileName: string
}
五、储存的变量
// 已上传文件列表
const filesList = ref<NewFileType[]>([])
// 切片默认大小
let chunkSize = 1024 * 1024 * 5
// 上传文件切片列表
const filesSliceList = ref<FileSliceListType[]>([])
六、选择文件
// 选择文件
const choiceFileHandle = (e:Event) => {
if (uploadLoading.value) return
if (!e.target) return
choiceInputValue.value = null
const files = Array.prototype.slice.call((e as HTMLInputEvent).target.files)
const newFileList = [...filesList.value, ...files]
// 记得再次添加去重
// removeDuplicateObj是业务逻辑的去重
filesList.value = removeDuplicateObj(newFileList)
}
七、文件分片及查询已上传的分片
// 查询已上传的切片
const queryUploadFileHandle = async(file:NewFileType, hash:string) => {
let isRepeat = false
await queryUploadFlilePost({ hash }).then((res) => {
if (res.code !== 200) {
ElMessage.error(res.msg)
return
}
const resultList = res?.data?.resultList
// 当前文件大小
const fileSize = file.size
// 当前文件分割多少份 （chunkSize 多少大小分割）
let chunkCount = Math.ceil(fileSize / chunkSize)
if (fileSize > chunkSize * 40) {
chunkSize = chunkSize * 8
chunkCount = Math.ceil(fileSize / chunkSize)
}
for (let i = 0; i < chunkCount; i++) {
// 当前 分割 开始点
const startPoint = i * chunkSize
// 当前分割 结束点
const endPoint = Math.min(startPoint + chunkSize, fileSize)
const chunk = file.slice(startPoint, endPoint)
// 存储分片状态
filesSliceList.value.push({
file: chunk,
chunkCount: chunkCount.toString(),
fileName: file.name,
hash,
chunkIndex: i
})
}
if (resultList && resultList.length !== 0) {
// 切片数组排除已上传的切片
for (let i = 0; i < filesSliceList.value.length; i++) {
const item:FileSliceListType = filesSliceList.value[i]
if (item.hash === hash && resultList.includes(String(item.chunkIndex))) {
filesSliceList.value.splice(i, 1)
i--
}
}
if (filesSliceList.value.length === 0) {
isRepeat = true
}
}
})
return isRepeat
}
八、所有文件分片同时上传
const promiseArr: unknown[] = []
// 全部上传
const allUploadHandle = async() => {
for (const file of filesList.value) {
if (file.hash) continue
const hash = await getFileMD5(file) as string
file.state = {
state_txt: 'load',
tips_txt: '处理中,请稍后'
}
file.hash = hash
file.progress = 0
file.speep = 0
// 文件切片处理及跳过已上传分片
const curFileIsRepeat = await queryUploadFileHandle(file, hash)
if (curFileIsRepeat) {
file.state = {
state_txt: 'success',
tips_txt: '上传成功！'
}
file.progress = 100
continue
}
file.state.tips_txt = '上传中，请稍后'
}
// 循环调用切片上传
for (const fileSlice of filesSliceList.value) {
const curFileIndex = filesList.value.findIndex(item => item.hash === fileSlice.hash)
const curFile = filesList.value[curFileIndex]
if (curFile.state.state_txt === 'success') continue
fileSliceUploadHandle(fileSlice)
}
Promise.all(promiseArr).then(() => {
const newFileList = filesList.value
for (let i = 0; i < newFileList.length; i++) {
const item = newFileList[i]
if (item.state.state_txt === 'error' || item.state.state_txt === 'load') {
nextBtnTips.value = '请删除上传失败的内容！'
nextBtnDisabled.value = true
} else {
nextBtnDisabled.value = false
}
}
}).catch((err) => {
console.log('文件上传失败：', err)
// 。。。。。失败处理
})
}
// 文件切片上传
const fileSliceUploadHandle = (fileChunk:FileSliceListType) => {
const curFileIndex = filesList.value.findIndex(item => item.hash === fileChunk.hash)
const curFile = filesList.value[curFileIndex]
const { chunkCount, chunkIndex, file, fileName, hash } = fileChunk
const curPromise = new Promise((resolve, reject) => {
uploadDigFlie({
fileName,
file,
chunkIndex,
hash,
chunkCount
}).then(res => {
if (res.code !== 200) {
ElMessage.error(res.msg)
return reject(res.msg)
}
curFile.speep = 100 / Number(chunkCount)
curFile.progress += curFile.speep
if (curFile.progress > 100) {
curFile.progress = 100
}
if (Math.ceil(curFile.progress) >= 100) {
curFile.state = {
state_txt: 'success',
tips_txt: '上传成功！'
}
}
return resolve(true)
})
})
promiseArr.push(curPromise)
}
九、下一步（对应合并所有分片）
const nextPromiseArr: unknown[] = []
// 下一步
const goNextHanlde = () => {
if (nextBtnDisabled.value) return
uploadLoading.value = true
let allFileId = ''
for (let i = 0; i < filesList.value.length; i++) {
const item = filesList.value[i]
const index = i
// 合并过的文件跳过合并
if (item.isMerge) continue
nextPromiseArr[index] = new Promise((resolve) => {
mergechunkFilePost({
fileName: item.name,
hash: item.hash
}).then(res => {
if (res.code !== 200) {
ElMessage.error(res.msg)
item.isMerge = false
return resolve(true)
}
// 增加合并过标识
item.isMerge = true
return resolve(true)
})
})
}
Promise.all(nextPromiseArr).then(() => {
uploadLoading.value = false
const newFileList = filesList.value
for (let i = 0; i < newFileList.length; i++) {
const item = newFileList[i]
if (!item.isMerge) {
newFileList[i].state = {
state_txt: 'error',
tips_txt: '上传失败原因：内容重复！'
}
filesList.value = newFileList
GetCurrentInstance && GetCurrentInstance.proxy?.$forceUpdate()
return
}
Router.push({
path: '/后续页面路由'
})
}
})
}
tips
文件使用spark-md5 获取hash值，文件内容不修改的话（文件名修改不影响hash值）获取的hash值是一致的，分片条件不变的话，索引也是对应一致的，以此做为前提才能做到跳过已上传的分片。
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
4
0- 0
已为社区贡献2条内容
所有评论(0)