Vue+el-upload配置minIO实现大文件的切片并发上传、上传进度展示、失败重试功能

vue3+el-upload实现切片上传

效果图

初始界面

上传中的界面

上传完成的界面

上传失败的界面

<template><div><el-uploadclass="BigFileUpload"ref="uploadRef"action="#"drag:show-file-list="false":on-change="handleFileChange":on-exceed="handleExceed":on-error="handleError":http-request="handleUpload":limit="fileLimit":file-list="fileList"><div:class="['BigFileUpload-text',fileList.length > 0 ? 'BigFileUpload-text-hasFileList' : 'BigFileUpload-text-noFileList']"><img class="el-upload__img" src="@/assets/newUI/icon-upload.png" /><div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div></div><template #tip><div class="el-upload__tip">导入规则：只允许上传大小不超过{{ fileSize / 1024 }}GB的文件。</div></template></el-upload><div:class="['BigFileUpload-list',fileList.length > 0 ? 'BigFileUpload-list-hasFileList' : 'BigFileUpload-list-noFileList']"><div class="fileList" v-for="(file, index) in fileList" :key="index"><el-image fit="scale-down" :src="computedFileIcon(file)" class="image file-image"></el-image><div class="file-name">{{ file.name }}</div><div class="file-progress"><div v-if="fileStatus === 'fail'" class="fail"><span class="text">上传失败！</span><span class="btn" @click="handleReTry(file)">点击重试</span></div><div v-if="fileStatus === 'success'" class="success"><span>100%上传完成</span><el-icon @click="handleRemove(file)"><Delete /></el-icon></div><div v-if="fileStatus === 'loading'" class="uploading"><span>{{ percentage }}%上传中</span></div></div></div></div></div>
</template><script setup>
import { ref, getCurrentInstance } from 'vue'
import { watch } from 'vue-demi'
import axios from 'axios'
import SparkMD5 from 'spark-md5'
import { getToken } from '@/utils/auth'
import { getUserAgentInfo } from '@/api/login'
import box from '@/assets/images/knowdge/box.png'
import jpg from '@/assets/images/knowdge/image.png'
import word from '@/assets/images/knowdge/DOC.png'
import xslx from '@/assets/images/knowdge/XLS.png'
import pdf from '@/assets/images/knowdge/PDF.png'
import ppt from '@/assets/images/knowdge/PPT.png'
import video from '@/assets/images/knowdge/video.png'
import mp3 from '@/assets/images/knowdge/video.png'
import zip from '@/assets/images/knowdge/zip.png'
import other from '@/assets/images/knowdge/file.png'
import txt from '@/assets/images/knowdge/TXT.png'
const imgList = {ppt: ppt,doc: word,docx: word,xlsx: xslx,xls: xslx,pdf: pdf,pdfx: pdf,zip: zip,rar: zip,jpg: jpg,jpeg: jpg,png: jpg,webp: jpg,mp3: mp3,mp4: video,txt: txt
}
let timeStamp = 0
const props = defineProps({chunkSize: {type: Number,default: 10 // 默认分片大小 10MB},actionURL: {type: String,required: true // 文件上传接口地址},fileLimit: {type: Number,default: 1},MAX_REQUEST: {// 最大并发数type: Number,default: 5},maxRetries: {// 重试次数type: Number,default: 2},// 大小限制(MB)fileSize: {type: Number,default: 200},// 大小限制(MB)fileListArr: {type: Array,default: []}
})
const { proxy } = getCurrentInstance()
const emit = defineEmits(['upload-success', 'upload-remove'])
const fileList = ref([])
const file = ref(null) // 当前上传的文件
const fileMd5 = ref('') // 文件的 MD5 值
const fileName = ref('') // 文件名称
const fileType = ref('') // 文件类型，带"."，例如 :  .mp3
const totalChunks = ref(0) // 文件的分片总数量
const uploadedChunks = ref([]) // 已上传的分片索引
const requestPool = ref([]) // 文件请求池
let chunkCountList = ref([]) // 选择的文件切片总数数组
let MAX_REQUEST = props.MAX_REQUEST // 最大请求数
let httpRequestParams = {}
const percentage = ref(0) // 进度
const fileStatus = ref('') // 当前上传的文件状态loading上传中，success上传成功，fail上传失败
let isAbortRequest = false // 是否放弃请求
// 计算文件类型
const computedFileIcon = fileItem => {const index = fileItem.name.lastIndexOf('.')const ext = fileItem.name.substr(index + 1)return imgList[ext] || other
}
// 计算文件的 MD5
const calculateFileMd5 = file => {return new Promise(resolve => {const reader = new FileReader()const spark = new SparkMD5.ArrayBuffer()reader.onload = e => {spark.append(e.target.result)resolve(spark.end())}reader.readAsArrayBuffer(file)})
}
// 文件选择回调
const handleFileChange = async uploadFile => {console.log(123)// 校验网络状态// if (!navigator.onLine) {//   this.$message.error('请检查网络连接');//   return false; // 阻止上传// }// 校验文件大小if (props.fileSize) {const isLt = file.size / 1024 / 1024 > props.fileSizeif (isLt) {console.log('上传文件已超过4G!')return false}}const index = uploadFile.name.lastIndexOf('.')const ext = uploadFile.name.substr(index + 1)// 文件file.value = uploadFile.raw// 文件名称fileName.value = uploadFile.name// 文件类型fileType.value = ext
}
// 开始上传
const startUpload = async () => {if (!file.value) {alert('请先选择文件！')return}uploadedChunks.value = []isAbortRequest = falsepercentage.value = 0fileStatus.value = 'loading'// 分片上传totalChunks.value = Math.ceil(file.value.size / (props.chunkSize * 1024 * 1024))// 计算文件的 MD5fileMd5.value = await calculateFileMd5(file.value)sliceFile()
}
// 将文件切片
const sliceFile = () => {// 用一个数组保存，一个文件切出来的总数chunkCountList.value.push(totalChunks.value)for (let i = 0; i < totalChunks.value; i++) {const size = props.chunkSize * 1024 * 1024const chunk = file.value.slice(i * size, (i + 1) * size) // 获取切片requestPool.value.push({ chunk, index: i }) // 加入请求池}timeStamp = new Date().getTime()processPool() // 处理请求池
}
// 处理请求池中的切片上传
const processPool = () => {while (requestPool.value.length > 0 && MAX_REQUEST > 0 && !isAbortRequest) {// 取出一个切片const { chunk, index } = requestPool.value.shift()// 接口切片uploadChunk(chunk, index).then(() => {if (requestPool.value.length > 0) {processPool() // 继续处理请求池}}).finally(() => {MAX_REQUEST++ // 释放一个请求槽})MAX_REQUEST-- // 占用一个请求槽}
}
// 上传分片
const uploadChunk = async (chunk, chunkIndex, retries = 0) => {const formData = new FormData()formData.append('fileName', fileName.value)formData.append('fileMD5', fileMd5.value)formData.append('chunkIndex', chunkIndex)formData.append('totalIndex', totalChunks.value)formData.append('file', chunk)formData.append('type', `.${fileType.value}`)formData.append('timeStamp', timeStamp)try {await axios.post(props.actionURL, formData, {headers: {'Content-Type': 'multipart/form-data',Authorization: 'Bearer ' + getToken(),Clientid: getUserAgentInfo()}}).then(res => {uploadedChunks.value.push(chunkIndex)if (res.data.data.status === 3) {console.log('上传完成:')httpRequestParams.onSuccess(res.data)percentage.value = 100fileStatus.value = 'success'emit('upload-success', res.data.data) // 通知父组件上传成功}if (res.data.data.status === 2) {const percent = (uploadedChunks.value.length / totalChunks.value) * 100percentage.value = Math.round(percent)fileStatus.value = 'loading'}if (res.data.data.status === -2) {// 接口出现错误-2console.log('后端合并失败-2:', res.data)isAbortRequest = truerequestPool.value.length = 0MAX_REQUEST = props.MAX_REQUESTfileStatus.value = 'fail'proxy.$refs.uploadRef.onError(new Error(`后端合并失败-2!`))httpRequestParams.onError(new Error(`后端合并失败-2!`))proxy.$refs.uploadRef.abort()throw new Error(`后端合并失败-2!`)}if (res.data.code === 510) {// 后端限流console.log('后端限流:', res.data)isAbortRequest = truerequestPool.value.length = 0props.MAX_REQUESTfileStatus.value = 'fail'httpRequestParams.onError()proxy.$refs.uploadRef.abort()throw new Error(`后端限流!`)}})} catch (error) {// 失败重试// console.log('失败重试:', error)// if (retries < props.maxRetries) {//   console.warn(`分片 ${chunkIndex} 上传失败，正在重试 (${retries + 1}/${props.maxRetries})`)//   await uploadChunk(chunk, chunkIndex, retries + 1) // 重试// } else {isAbortRequest = truerequestPool.value.length = 0MAX_REQUEST = props.MAX_REQUESTfileStatus.value = 'fail'proxy.$refs.uploadRef.abort()httpRequestParams.onError()throw new Error(`分片 ${chunkIndex} 上传失败，重试次数用尽!`)// }}
}
// 文件列表移除文件
const handleRemove = file => {if (props.fileLimit === 1) {proxy.$refs['uploadRef'].clearFiles()fileList.value = []emit('upload-remove')}
}
// 上传失败，重试
const handleReTry = file => {percentage.value = 0uploadedChunks.value = []// 自动触发上传startUpload()
}
// 文件超出个数限制
const handleExceed = () => {proxy.$modal.msgError(`上传文件数量不能超过 ${props.fileLimit} 个!`)
}
// 文件上传失败
const handleError = () => {percentage.value = 0fileStatus.value = 'fail'
}
// 文件上传进度
const handleUpload = async parms => {console.log(parms)httpRequestParams = parms// 文件列表fileList.value = [{name: fileName.value}]console.log(fileList.value, "fileList.value");// 自动触发上传startUpload()
}
watch(() => props.fileListArr,newVal => {if (newVal && newVal.length > 0) {fileList.value = newValfileStatus.value = 'success'}},{ immediate: true }
)
</script><style lang="scss" scoped>
.BigFileUpload {width: 100%;min-width: 440px;:deep .el-upload-dragger {height: 132px;padding: 0;border-radius: 4px 4px 4px 4px;border: 1px dashed #2e75ff;}.BigFileUpload-text {margin-top: 20px;}.el-upload__img {width: 54px;height: 54px;}.el-upload__tip {margin-top: 0;font-family:PingFang SC,PingFang SC;font-weight: 400;font-size: 12px;color: #141d39;line-height: 24px;text-align: left;font-style: normal;text-transform: none;}
}
</style>