|
|
@@ -0,0 +1,848 @@
|
|
|
+<template>
|
|
|
+ <div class="mydiv">
|
|
|
+ <a-spin :spinning="spinning" tip="读取中...">
|
|
|
+ <a-upload-dragger
|
|
|
+ ref="fileUpload"
|
|
|
+ :file-list="fileList"
|
|
|
+ :before-upload="beforeUpload"
|
|
|
+ @change="handleChange"
|
|
|
+ :show-upload-list="false"
|
|
|
+ :customRequest="customRequest"
|
|
|
+ :multiple="false"
|
|
|
+ :drag="true"
|
|
|
+ :progress="progress"
|
|
|
+ >
|
|
|
+ <div >
|
|
|
+ <div><p class="ant-upload-text" style="display: inline-block;">点击上传或将文件拖拽至此区域上传</p></div>
|
|
|
+ <div> <p class="ant-upload-hint" style="display: inline-block;">
|
|
|
+ 按住Ctrl可同时多选,支持上传
|
|
|
+ </p></div>
|
|
|
+ <div> <p class="ant-upload-hint" style="width: 50%;
|
|
|
+ display: inline-block;">
|
|
|
+ {{props.upLoadfileLists.join('/')}}
|
|
|
+ </p></div>
|
|
|
+ <div><p class="ant-upload-hint" style="display: inline-block;">
|
|
|
+ 等单个文件不能超过2G
|
|
|
+ </p></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </a-upload-dragger>
|
|
|
+ </a-spin>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- <div style="margin-bottom: 20px">
|
|
|
+ <a-button v-if="uploadFileList.length > 0" type="primary" @click="uploadFilesList">上传</a-button>
|
|
|
+ </div> -->
|
|
|
+
|
|
|
+ <div v-for="(item, index) in uploadFileList" :key="index">
|
|
|
+ <div style="padding: 10px">
|
|
|
+ <div style="display: flex; width: 100%; align-items: center; justify-content: space-between">
|
|
|
+ <div>
|
|
|
+ <span>{{ item.name.length > 20 ? item.name.slice(0, 20) + '...' + item.fileSuffix : item.name }}</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span v-if="item.time != ''" style="display: block; color: blue">{{ item.time }}</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div>
|
|
|
+<!-- <span-->
|
|
|
+<!-- v-if="item.percents == 0"-->
|
|
|
+<!-- style="color: red; cursor: pointer; margin-left: 10px"-->
|
|
|
+<!-- >读取中</span-->
|
|
|
+<!-- >-->
|
|
|
+ <span
|
|
|
+ v-if="item.percents == 0 || item.percents == 100"
|
|
|
+ style="color: red; cursor: pointer; margin-left: 10px"
|
|
|
+ @click="handlerRemoveItem(index)"
|
|
|
+ >删除</span
|
|
|
+ >
|
|
|
+<!-- <span-->
|
|
|
+<!-- v-if="-->
|
|
|
+<!-- item.percents >= 0 &&-->
|
|
|
+<!-- item.percents < 100 &&-->
|
|
|
+<!-- (pauseFlags[item.md5] == false || pauseFlags[item.md5] == undefined)-->
|
|
|
+<!-- "-->
|
|
|
+<!-- style="color: blue; cursor: pointer; margin-left: 10px"-->
|
|
|
+<!-- @click="pauseUpload(index)"-->
|
|
|
+<!-- >暂停</span-->
|
|
|
+<!-- >-->
|
|
|
+<!-- <span-->
|
|
|
+<!-- v-if="item.percents >= 0 && item.percents < 100 && pauseFlags[item.md5] == true"-->
|
|
|
+<!-- style="color: green; cursor: pointer; margin-left: 10px"-->
|
|
|
+<!-- @click="resumeUpload(index)"-->
|
|
|
+<!-- >恢复</span-->
|
|
|
+<!-- >-->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+<!-- <a-progress :percent="item.percents" />-->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- <div> -->
|
|
|
+ <!-- <el-progress :text-inside="true" :stroke-width="20" :percentage="successfulChunkPercents" status="success" /> -->
|
|
|
+ <!-- <a-progress :percent="successfulChunkPercents" /> -->
|
|
|
+ <!-- </div> -->
|
|
|
+
|
|
|
+ <!-- 已上传列表-->
|
|
|
+ <!-- <el-table :data="uploadList" border style="width: 100%">
|
|
|
+ <el-table-column fixed prop="id.date" label="日期" width="150"> </el-table-column>
|
|
|
+ <el-table-column prop="url" label="下载地址"> </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column label="操作">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-button link type="primary" size="small" @click.prevent="deleteFile(scope.row.url)"> 删除 </el-button>
|
|
|
+ <el-button link type="primary" size="small" @click.prevent="downloadFile(scope.row.url)"> 下载 </el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table> -->
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script setup>
|
|
|
+import { ref, onMounted } from 'vue'
|
|
|
+import axios from 'axios'
|
|
|
+import sysConfig from '@/config/index'
|
|
|
+ import { miniyunStore } from '@/store/miniyun'
|
|
|
+ const myMiniyunStore = miniyunStore()
|
|
|
+const fileUpload = ref(null)
|
|
|
+ import { message } from 'ant-design-vue'
|
|
|
+ import SparkMD5 from 'spark-md5'
|
|
|
+ import tool from '@/utils/tool'
|
|
|
+ const uploadFileList = ref([])
|
|
|
+ const spinning = ref(false)
|
|
|
+const chunkSize = ref(5 * 1024 * 1024)
|
|
|
+ const props = defineProps({
|
|
|
+ uploadCount: {
|
|
|
+ type: Number,
|
|
|
+ default: () => 10
|
|
|
+ },
|
|
|
+ upLoadfileLists: {
|
|
|
+ type: Array,
|
|
|
+ // 视频"wmv","avi","flv","mpeg","mpg","rmvb","mov","mkv","mp4"以及文档"doc","docx","ppt","pptx","xls","xlsx","pdf"应该都允许
|
|
|
+ default: () => ['jpg','png','pdf','mp4','wmv','avi','flv','mpeg','mpg','rmvb','mov','mkv','docx','doc','xlsx','xls','pptx','ppt','txt','cad','zip','rar','dwg','dxf','dwt']
|
|
|
+ },
|
|
|
+ })
|
|
|
+
|
|
|
+ const handlerRemoveItem = (index) => {
|
|
|
+ const item = uploadFileList.value[index]
|
|
|
+ // if (item && item.md5) {
|
|
|
+ // delete pauseFlags.value[item.md5] // 清理暂停标志
|
|
|
+ // }
|
|
|
+ uploadFileList.value.splice(index, 1)
|
|
|
+ // emit('onSuccess', uploadFileList.value)
|
|
|
+ }
|
|
|
+ const pauseUpload = (index) => {
|
|
|
+ const item = uploadFileList.value[index]
|
|
|
+ if (item && item.md5) {
|
|
|
+ pauseFlags.value[item.md5] = true
|
|
|
+ uploadingTasks.value[item.md5] = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ const resumeUpload = (index) => {
|
|
|
+ const item = uploadFileList.value[index]
|
|
|
+ if (!item || !item.md5) return
|
|
|
+
|
|
|
+ pauseFlags.value[item.md5] = false
|
|
|
+
|
|
|
+ // 如果当前上传任务小于 2,则开始上传
|
|
|
+ const activeTasks = Object.keys(uploadingTasks.value).filter((key) => uploadingTasks.value[key])
|
|
|
+ if (activeTasks.length < 2) {
|
|
|
+ uploadingTasks.value[item.md5] = true
|
|
|
+ // uploadSingleFile(item)
|
|
|
+ } else {
|
|
|
+ pauseFlags.value[item.md5] = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ const calculateFileMD5 = (file) => {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ const reader = new FileReader()
|
|
|
+ const spark = new SparkMD5.ArrayBuffer()
|
|
|
+
|
|
|
+ reader.onload = (e) => {
|
|
|
+ spark.append(e.target.result)
|
|
|
+ const md5 = spark.end()
|
|
|
+ resolve(md5)
|
|
|
+ }
|
|
|
+
|
|
|
+ reader.onerror = () => reject(new Error('文件读取失败'))
|
|
|
+
|
|
|
+ reader.readAsArrayBuffer(file)
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ const updateProgress = (chunkSize) => {
|
|
|
+ uploadedSize.value += chunkSize
|
|
|
+ const percent = Math.round((uploadedSize.value / totalSize.value) * 100)
|
|
|
+ console.log(`上传进度: ${percent}%`)
|
|
|
+ }
|
|
|
+ const calculateSpeed = (startTime, uploadedSize) => {
|
|
|
+ const currentTime = new Date().getTime()
|
|
|
+ const timeElapsed = (currentTime - startTime) / 1000 // 单位:秒
|
|
|
+ if (timeElapsed > 0) {
|
|
|
+ const speed = uploadedSize / timeElapsed // 单位:字节/秒
|
|
|
+ return speed
|
|
|
+ }
|
|
|
+ return 0
|
|
|
+ }
|
|
|
+ const estimateRemainingTime = (startTime, uploadedSize, totalSize) => {
|
|
|
+ console.log('疑问', ' 总的 ', totalSize, ' 变化的 ', uploadedSize)
|
|
|
+ const remainingSize = totalSize - uploadedSize // 剩余文件大小
|
|
|
+ const speed = calculateSpeed(startTime, uploadedSize) // 平均上传速度(字节/秒)
|
|
|
+
|
|
|
+ if (speed > 0) {
|
|
|
+ const remainingTimeSeconds = remainingSize / speed // 剩余时间(秒)
|
|
|
+ return remainingTimeSeconds
|
|
|
+ }
|
|
|
+ return Infinity // 如果上传速度为 0,则无法估算
|
|
|
+ }
|
|
|
+ const formatTime = (seconds) => {
|
|
|
+ const minutes = Math.floor(seconds / 60)
|
|
|
+ const secs = Math.floor(seconds % 60)
|
|
|
+ if (minutes == 0 && secs == 0) {
|
|
|
+ return ''
|
|
|
+ }
|
|
|
+ return `${minutes} 分 ${secs} 秒`
|
|
|
+ }
|
|
|
+ // 异步方法:选择文件时触发 ============
|
|
|
+ const handleFileChange = async (file) => {
|
|
|
+ // const reader = new FileReader()
|
|
|
+ // const spark = new SparkMD5.ArrayBuffer()
|
|
|
+ // console.log("读取文件",file.raw)
|
|
|
+ // reader.readAsArrayBuffer(file.raw) // 异步读取文件内容
|
|
|
+
|
|
|
+ // const fileContent = await new Promise((resolve, reject) => {
|
|
|
+ // reader.onload = (event) => {
|
|
|
+ // console.log('开始读取文件了...', event, reader.result)
|
|
|
+ // spark.append(event.target.result)
|
|
|
+ // resolve(spark.end())
|
|
|
+ // }
|
|
|
+ // reader.onerror = (error) => {
|
|
|
+ // console.log('读取文件时发生错误...', error)
|
|
|
+ // reject(error)
|
|
|
+ // }
|
|
|
+ // reader.readAsArrayBuffer(file)
|
|
|
+ // })
|
|
|
+ // console.log('111文件的md5哈希值是 fileContent:', fileContent)
|
|
|
+ // 计算MD5哈希值
|
|
|
+ let fileMd5 = await calculateFileMD5(file.raw)
|
|
|
+ file.raw.md5 = fileMd5
|
|
|
+ console.log('====开始获取File对象了...', file)
|
|
|
+ let fileSuffix = '.' + file.raw.name.split('.').pop() // 得到.文件类型
|
|
|
+ let currentFile = file.raw
|
|
|
+ console.log('currentFile:', currentFile)
|
|
|
+ // for (let i = 0; i < chunkCount.value; i++) {
|
|
|
+ // // 文件开始遍历切片存入数组
|
|
|
+ // const start = i * chunkSize.value
|
|
|
+ // console.log('循环中的currentFile:', currentFile.value)
|
|
|
+ // const end = Math.min(
|
|
|
+ // start + chunkSize.value - 1,
|
|
|
+ // currentFile.value.size - 1
|
|
|
+ // )
|
|
|
+ // chunkList.value[i] = currentFile.value.slice(start, end)
|
|
|
+ // }
|
|
|
+ let chunkList = splitFileByChunkSize(currentFile, chunkSize.value)
|
|
|
+ console.log('file对象:', file)
|
|
|
+ return {
|
|
|
+ name: file.raw.name,
|
|
|
+ size: currentFile.size,
|
|
|
+ md5: fileMd5, // md5哈希值
|
|
|
+ chunks: chunkList, // 分块列表
|
|
|
+ fileSuffix: fileSuffix, // 后缀
|
|
|
+ percents: 0,
|
|
|
+ time: ''
|
|
|
+ }
|
|
|
+
|
|
|
+ // console.log('md5:', fileMd5.value)
|
|
|
+ // console.log('chunkList:', chunkList.value)
|
|
|
+ // console.log('fileSuffix:', fileSuffix.value)
|
|
|
+ // console.log('currentFile:', currentFile.value)
|
|
|
+ // uploadFileList.value.push({
|
|
|
+ // name: file.raw.name,
|
|
|
+ // size: currentFile.value.size,
|
|
|
+ // md5: fileMd5.value, // md5哈希值
|
|
|
+ // chunks: chunkList.value, // 分块列表
|
|
|
+ // fileSuffix: fileSuffix.value, // 后缀
|
|
|
+ // percents: 0,
|
|
|
+ // time: ''
|
|
|
+ // }) // 使用对象数组进行处理 ============
|
|
|
+ // chunkList.value = []
|
|
|
+ // console.log('uploadFileList是:', uploadFileList.value)
|
|
|
+ // console.log('结束handleFileChange了')
|
|
|
+ }
|
|
|
+
|
|
|
+ const splitFileByChunkSize = (file, chunkSizeValue) => {
|
|
|
+ const fileSize = file.size
|
|
|
+ const chunkCount = Math.ceil(fileSize / chunkSizeValue) // 计算总分块数
|
|
|
+ // console.log(
|
|
|
+ // '统计:',
|
|
|
+ // '块数',
|
|
|
+ // chunkCount,
|
|
|
+ // '文件大小',
|
|
|
+ // fileSize,
|
|
|
+ // ' 单块 ',
|
|
|
+ // chunkSizeValue
|
|
|
+ // )
|
|
|
+ let chunkList = []
|
|
|
+ for (let i = 0; i < chunkCount; i++) {
|
|
|
+ const start = i * chunkSizeValue
|
|
|
+ const min = start + chunkSizeValue
|
|
|
+
|
|
|
+ console.log('奇怪:', ' start ', start, ' chunkSizeValue ', chunkSizeValue, ' min ', min)
|
|
|
+ const end = Math.min(min, fileSize)
|
|
|
+ // console.log(
|
|
|
+ // '统计:',
|
|
|
+ // ' start ',
|
|
|
+ // start,
|
|
|
+ // ' end ',
|
|
|
+ // end,
|
|
|
+ // ' 单块 ',
|
|
|
+ // chunkSizeValue,
|
|
|
+ // ' 比较谁大 ',
|
|
|
+ // start + chunkSizeValue,
|
|
|
+ // ' ssss ',
|
|
|
+ // fileSize
|
|
|
+ // )
|
|
|
+ chunkList[i] = file.slice(start, end) // 注意:slice 是 [start, end) 前闭后开区间
|
|
|
+
|
|
|
+ console.log(
|
|
|
+ '准备开始:',
|
|
|
+ ' 循环次数 ',
|
|
|
+ i,
|
|
|
+ ' 块数 ',
|
|
|
+ chunkCount,
|
|
|
+ '开始的大小',
|
|
|
+ start,
|
|
|
+ '结束的大小',
|
|
|
+ end,
|
|
|
+ ' file ',
|
|
|
+ file.slice(start, end)
|
|
|
+ )
|
|
|
+ }
|
|
|
+
|
|
|
+ console.log('分片完成:', chunkList)
|
|
|
+ return chunkList
|
|
|
+ }
|
|
|
+
|
|
|
+ const checkMd5List = async (uploadFile) => {
|
|
|
+ let md5List = []
|
|
|
+ let element = {
|
|
|
+ md5: uploadFile.md5,
|
|
|
+ size: uploadFile.size,
|
|
|
+ chunkSize: uploadFile.chunks.length,
|
|
|
+ fileName: uploadFile.name,
|
|
|
+ fileSuffix: uploadFile.fileSuffix
|
|
|
+ }
|
|
|
+ md5List.push(element)
|
|
|
+
|
|
|
+ await axios
|
|
|
+ .post(sysConfig.API_URL+'/api/webapp/minio/checkMd5List', md5List, { headers: { Token: tool.data.get('TOKEN') } })
|
|
|
+ .then((res) => {
|
|
|
+ console.log('文件上传返回结果:', res.data)
|
|
|
+ // return
|
|
|
+ var list = res.data
|
|
|
+ if (list.length !== 0) {
|
|
|
+ let upList = []
|
|
|
+ for (let item of list) {
|
|
|
+ console.log('item回来的', JSON.stringify(item))
|
|
|
+ if (uploadFile.md5 === item.md5) {
|
|
|
+ uploadFile.userFileId = item.userFileId
|
|
|
+ //重要的步骤
|
|
|
+ if (item.userFileId) {
|
|
|
+ uploadFile.percents = 100
|
|
|
+ pauseFlags.value[item.md5] = false
|
|
|
+ // emit('onSuccess', uploadFile)
|
|
|
+ }
|
|
|
+ // upList.push(item)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log('upList是:', upList)
|
|
|
+ // uploadFileList.value.push(uploadFile)
|
|
|
+ // emit('onSuccess', uploadFileList.value)
|
|
|
+ } else {
|
|
|
+ // clearFileList()
|
|
|
+ }
|
|
|
+
|
|
|
+ // 文件均存在minio中了,无需上传
|
|
|
+ // if (uploadFileList.value.length === 0) {
|
|
|
+ // successfulChunkPercents.value = 100
|
|
|
+ // alert('文件上传成功')
|
|
|
+ // }
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ console.log('检查返回错误', error)
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ // 点击上传按钮触发多文件上传 ===============
|
|
|
+ const uploadFilesList = async () => {
|
|
|
+ if (upLoadTag.value == true) {
|
|
|
+ message.loading('正在上传')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ upLoadTag.value = true
|
|
|
+
|
|
|
+ emit('onUpLoading', upLoadTag.value)
|
|
|
+ if (currentFile.value == null) {
|
|
|
+ // alert('请选择文件后再上传!')
|
|
|
+ message.error('请选择文件后再上传!')
|
|
|
+ successfulChunkPercents.value = 0 // 重置百分比
|
|
|
+ fileList.value = [] // 文件列表
|
|
|
+ return
|
|
|
+ }
|
|
|
+ // 检查所有文件中是否存在未上传的,未上传则需要上传对应的文件 =========
|
|
|
+ let md5List = []
|
|
|
+ console.log('准备上传', uploadFileList.value)
|
|
|
+ for (let i = 0; i < uploadFileList.value.length; i++) {
|
|
|
+ let element = {
|
|
|
+ // md5: uploadFileList.value[i].md5,
|
|
|
+ md5: uploadFileList.value[i].md5,
|
|
|
+ chunkSize: uploadFileList.value[i].chunks.length,
|
|
|
+ fileName: uploadFileList.value[i].name,
|
|
|
+ fileSuffix: uploadFileList.value[i].fileSuffix
|
|
|
+ }
|
|
|
+ md5List.push(element)
|
|
|
+ }
|
|
|
+ console.log('上传的md5_suffix_List是:', md5List)
|
|
|
+
|
|
|
+ await axios
|
|
|
+ .post(sysConfig.API_URL+'/api/webapp/minio/checkMd5List', md5List, { headers: { Token: tool.data.get('TOKEN') } })
|
|
|
+ .then((res) => {
|
|
|
+ console.log('文件上传返回结果:', res.data)
|
|
|
+ // return
|
|
|
+ var list = res.data
|
|
|
+ if (list.length !== 0) {
|
|
|
+ let upList = []
|
|
|
+ for (let item1 of uploadFileList.value) {
|
|
|
+ for (let item2 of list) {
|
|
|
+ console.log('item回来的', JSON.stringify(item2))
|
|
|
+ if (item1.md5 === item2.md5) {
|
|
|
+ //重要的步骤
|
|
|
+ item1.userFileId = item2.userFileId
|
|
|
+ if (item1.userFileId) {
|
|
|
+ item1.percents = 100
|
|
|
+ }
|
|
|
+ upList.push(item1)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log('upList是:', upList)
|
|
|
+ uploadFileList.value = upList
|
|
|
+ } else {
|
|
|
+ clearFileList()
|
|
|
+ }
|
|
|
+ console.log('最后必须上传的文件:', uploadFileList.value)
|
|
|
+ // 文件均存在minio中了,无需上传
|
|
|
+ // if (uploadFileList.value.length === 0) {
|
|
|
+ // successfulChunkPercents.value = 100
|
|
|
+ // alert('文件上传成功')
|
|
|
+ // }
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ console.log('检查返回错误', error)
|
|
|
+ })
|
|
|
+ // return
|
|
|
+ console.log('开始上传', uploadFileList.value)
|
|
|
+ // 检查上传的多个文件是否均存在,如果部分存在,进行剔除,剩余部分仍旧进行上传。
|
|
|
+ // 分块的Promises化
|
|
|
+ const chunkPromises = []
|
|
|
+ // 上传分块的数组,校验是否完成上传
|
|
|
+ const chunksUploadedList = []
|
|
|
+ // 直接计算一共多少个分块
|
|
|
+ uploadFileList.value.forEach((item) => {
|
|
|
+ allChunks.value += item.chunks.length
|
|
|
+ })
|
|
|
+
|
|
|
+ console.log('所有文件加起来一共有多少个分块?', allChunks.value, uploadFileList.value)
|
|
|
+ for (const item of uploadFileList.value) {
|
|
|
+ const md5 = item.md5
|
|
|
+ uploadChunks.value = 0
|
|
|
+
|
|
|
+ if (item.userFileId == undefined || item.userFileId == null) {
|
|
|
+ startTime.value = new Date().getTime() // 开始时间戳(毫秒
|
|
|
+ totalSize.value = item.size // 文件总大小
|
|
|
+ uploadedSize.value = 0
|
|
|
+ for (let i = 0; i < item.chunks.length; i++) {
|
|
|
+ console.log('上传第', i + 1, '个分片')
|
|
|
+ let chunk = item.chunks[i]
|
|
|
+ console.log('去上传...', i + 1, chunk)
|
|
|
+
|
|
|
+ // 检查是否暂停
|
|
|
+ console.log('看看...', ' 列表 ', pauseFlags.value, ' md5 ', md5)
|
|
|
+
|
|
|
+ while (pauseFlags.value[md5] && true == pauseFlags.value[md5]) {
|
|
|
+ await new Promise((resolve) => setTimeout(resolve, 100)) // 等待 1 秒后再次检查
|
|
|
+ }
|
|
|
+ chunkPromises.push(
|
|
|
+ await uploadFilesChunk(
|
|
|
+ {
|
|
|
+ md5,
|
|
|
+ chunk,
|
|
|
+ chunkIndex: i + 1,
|
|
|
+ fileSuffix: item.fileSuffix,
|
|
|
+ chunkSize: item.chunks.length,
|
|
|
+ fileName: item.name
|
|
|
+ },
|
|
|
+ () => {
|
|
|
+ chunksUploaded.value++
|
|
|
+ uploadChunks.value++
|
|
|
+
|
|
|
+ // successfulChunkPercents.value = 100 * (uploadChunks.value / allChunks.value).toFixed(2)
|
|
|
+ uploadedSize.value += chunk.size // 更新已上传大小
|
|
|
+ const remainingTime = estimateRemainingTime()
|
|
|
+ console.log(`预计剩余时间: ${formatTime(remainingTime)}`)
|
|
|
+ item.percents = (100 * (uploadChunks.value / item.chunks.length)).toFixed(2)
|
|
|
+ item.time = formatTime(remainingTime)
|
|
|
+ console.log(
|
|
|
+ '执行了自增...',
|
|
|
+ '分片长度',
|
|
|
+ item.chunks.length,
|
|
|
+ '执行到多少了',
|
|
|
+ uploadChunks.value,
|
|
|
+ '百分比',
|
|
|
+ 100 * (uploadChunks.value / item.chunks.length).toFixed(2)
|
|
|
+ )
|
|
|
+ console.log('this.uploadChunks:', uploadChunks.value)
|
|
|
+ console.log('this.allChunks:', allChunks.value)
|
|
|
+ console.log('进度:', (uploadChunks.value / allChunks.value).toFixed(2))
|
|
|
+ }
|
|
|
+ )
|
|
|
+ )
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ console.log('this.chunkUploaded是:', chunksUploaded.value)
|
|
|
+ chunksUploadedList.push(chunksUploaded.value) // 存储不同文件的上传分块数量
|
|
|
+ chunksUploaded.value = 0
|
|
|
+ }
|
|
|
+ await Promise.all(chunkPromises)
|
|
|
+ console.log('上传完成!')
|
|
|
+ console.log('chunksUploadList是:', chunksUploadedList)
|
|
|
+ let mergeResults = []
|
|
|
+ for (let i = 0; i < chunksUploadedList.length; i++) {
|
|
|
+ console.log('this.uploadFileList' + i + '是:' + uploadFileList.value[i].chunks.length)
|
|
|
+ console.log('chunksUploadedList' + i + '是:' + chunksUploadedList[i])
|
|
|
+ if (uploadFileList.value[i].chunks.length === chunksUploadedList[i]) {
|
|
|
+ const mergeResult = await axios.post(
|
|
|
+ // `/api/webapp/disk/minio/merge?md5=${uploadFileList.value[i].md5}&fileSuffix=${uploadFileList.value[i].fileSuffix}&chunkTotal=${chunksUploadedList[i]}`
|
|
|
+ sysConfig.API_URL+`/api/webapp/minio/merge?md5=${uploadFileList.value[i].md5}&fileSuffix=${uploadFileList.value[i].fileSuffix}&chunkTotal=${chunksUploadedList[i]}&fileName=${uploadFileList.value[i].name}&fileSize=${uploadFileList.value[i].size}`,
|
|
|
+ null,
|
|
|
+ { headers: { Token: tool.data.get('TOKEN') } }
|
|
|
+ )
|
|
|
+ // if (mergeResult.data.startsWith('[miss_chunk]')) {
|
|
|
+ // alert('文件缺失,请重新上传')
|
|
|
+ // return
|
|
|
+ // }
|
|
|
+ console.log('合并结果1:', mergeResult)
|
|
|
+ uploadFileList.value[i].userFileId = mergeResult.data.userFileId
|
|
|
+ // mergeResults.push(mergeResult)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log('合并结果2:', uploadFileList.value)
|
|
|
+ upLoadTag.value = false
|
|
|
+ // 上传完成,清理任务状态
|
|
|
+ delete uploadingTasks.value[md5]
|
|
|
+ emit('onUpLoading', upLoadTag.value)
|
|
|
+ let finalRes = true
|
|
|
+ // emit('onSuccess', uploadFileList.value)
|
|
|
+ // for (const result of mergeResults) {
|
|
|
+ // if (result.data === '失败') {
|
|
|
+ // finalRes = false
|
|
|
+ // alert('上传失败!请重新上传')
|
|
|
+ // return
|
|
|
+ // } else {
|
|
|
+ // alert('上传成功!')
|
|
|
+ // successfulChunkPercents.value = 100
|
|
|
+ // clearFileList()
|
|
|
+ // // getList()
|
|
|
+ // return
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 多文件上传分片 ============
|
|
|
+ const uploadFilesChunk = async (data, onSuccess) => {
|
|
|
+ console.log('进入了uploadFileChunk方法...')
|
|
|
+ let retryTime = 5 //重试次数
|
|
|
+ const formData = new FormData()
|
|
|
+ formData.append('md5', data.md5)
|
|
|
+ // formData.append('md5', md5)
|
|
|
+ formData.append('chunkIndex', data.chunkIndex)
|
|
|
+ formData.append('chunk', data.chunk)
|
|
|
+ formData.append('chunkSize', data.chunkSize)
|
|
|
+ formData.append('fileSuffix', data.fileSuffix)
|
|
|
+ formData.append('fileName', data.fileName)
|
|
|
+ return axios
|
|
|
+ .post(sysConfig.API_URL+'/api/webapp/minio/upload', formData, {
|
|
|
+ headers: { 'Content-Type': 'multipart/form-data', Token: tool.data.get('TOKEN') }
|
|
|
+ })
|
|
|
+ .then((res) => onSuccess())
|
|
|
+ .catch((error) => {
|
|
|
+ console.log('上传分片失败了...', error)
|
|
|
+ if (retryTime > 0) {
|
|
|
+ retryTime--
|
|
|
+ return uploadChunk(data, onSuccess)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ // 上传分片 旧
|
|
|
+ const uploadChunk = (data, onSuccess) => {
|
|
|
+ let retryTime = 5 //重试次数
|
|
|
+ const formData = new FormData()
|
|
|
+ // formData.append('identifier', fileMd5.value)
|
|
|
+ formData.append('md5', data.md5)
|
|
|
+ // formData.append('md5', md5)
|
|
|
+ formData.append('chunkIndex', data.chunkIndex)
|
|
|
+ formData.append('chunk', data.chunk)
|
|
|
+ formData.append('chunkSize', data.chunkSize)
|
|
|
+ formData.append('fileSuffix', data.fileSuffix)
|
|
|
+ formData.append('fileName', data.fileName)
|
|
|
+ return axios
|
|
|
+ .post(sysConfig.API_URL+'/api/webapp/minio/upload', formData, {
|
|
|
+ headers: { 'Content-Type': 'multipart/form-data', Token: tool.data.get('TOKEN') }
|
|
|
+ })
|
|
|
+ .then((res) => onSuccess())
|
|
|
+ .catch((error) => {
|
|
|
+ if (retryTime > 0) {
|
|
|
+ retryTime--
|
|
|
+ return uploadChunk(data, onSuccess)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ // 删除文件
|
|
|
+ const deleteFile = (url) => {
|
|
|
+ axios
|
|
|
+ .get(sysConfig.API_URL+`/api/webapp/disk/delete?url=` + url)
|
|
|
+ .then((res) => {
|
|
|
+ console.log('删除文件:', res.data)
|
|
|
+ alert(res.data ? '删除成功!' : '删除失败!')
|
|
|
+ // getList()
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ console.log('删除失败:', error)
|
|
|
+ })
|
|
|
+ console.log('url是:', url)
|
|
|
+ }
|
|
|
+
|
|
|
+ const downloadFile = (url) => {
|
|
|
+ window.location.href = url
|
|
|
+ }
|
|
|
+ /**
|
|
|
+ * 判断文件名的后缀是否存在于指定数组中
|
|
|
+ * @param {string} fileName - 文件名(如 "sss.mp4")
|
|
|
+ * @param {Array<string>} suffixArray - 后缀数组(如 ['jpg','png','pdf','mp4',...])
|
|
|
+ * @returns {boolean} - 是否存在
|
|
|
+ */
|
|
|
+ const isFileSuffixInArray = (fileName, suffixArray) => {
|
|
|
+ // 获取文件后缀(包括点号)
|
|
|
+ const fileSuffix = fileName.split('.').pop();
|
|
|
+
|
|
|
+ // 检查后缀是否在数组中(包含点号匹配)
|
|
|
+ return suffixArray.includes(fileSuffix);
|
|
|
+ }
|
|
|
+ const beforeUpload = async (file) => {
|
|
|
+ console.log('选择了文件', file)
|
|
|
+ spinning.value = true
|
|
|
+
|
|
|
+ // upLoadfileLists
|
|
|
+ if(!isFileSuffixInArray( file.name,props.upLoadfileLists)){
|
|
|
+ const fileSuffix = file.name.split('.').pop();
|
|
|
+ message.error('不允许上传后缀' +fileSuffix)
|
|
|
+ spinning.value = false
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ if(uploadFileList.value.length >= props.uploadCount){
|
|
|
+ message.error('超过上传条目' + props.uploadCount + "条")
|
|
|
+ spinning.value = false
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ let upFile = await handleFileChange({ raw: file })
|
|
|
+ console.log('可以上传的文件内容是', upFile)
|
|
|
+ // 检查本地 uploadFileList 是否已存在该 md5 文件
|
|
|
+ const exists = uploadFileList.value.some((item) => item.md5 === upFile.md5)
|
|
|
+ if (exists) {
|
|
|
+ message.warning('该文件已存在,不再重复添加')
|
|
|
+ spinning.value = false
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ spinning.value = false
|
|
|
+ // await checkMd5List(upFile)
|
|
|
+ uploadFileList.value.push(upFile)
|
|
|
+ // emit('onSuccess', uploadFileList.value)
|
|
|
+ // const activeTasks = Object.keys(uploadingTasks.value).filter((key) => uploadingTasks.value[key])
|
|
|
+ //
|
|
|
+ // if (activeTasks.length < 2) {
|
|
|
+ // pauseFlags.value[upFile.md5] = false
|
|
|
+ // uploadingTasks.value[upFile.md5] = true
|
|
|
+ // } else {
|
|
|
+ // pauseFlags.value[upFile.md5] = true
|
|
|
+ // message.warning('上传队列已满,将进入暂停状态')
|
|
|
+ // }
|
|
|
+ // await uploadSingleFile(upFile)
|
|
|
+ // spinning.value = false
|
|
|
+ return false // 阻止默认上传
|
|
|
+ }
|
|
|
+ const handleChange = (info) => {
|
|
|
+ const { file } = info
|
|
|
+ if (file.status === 'removed') {
|
|
|
+ fileList.value = []
|
|
|
+ clearFileList()
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ const uploadSingleFile = async (fileObj) => {
|
|
|
+ const file = fileObj
|
|
|
+ const md5 = file.md5
|
|
|
+ const index = uploadFileList.value.findIndex((item) => item.md5 === md5)
|
|
|
+
|
|
|
+ if (index === -1) return
|
|
|
+
|
|
|
+ const item = uploadFileList.value[index]
|
|
|
+
|
|
|
+ if (!item || item.userFileId) return
|
|
|
+
|
|
|
+ // // 如果是暂停状态则不执行上传
|
|
|
+ // while (pauseFlags.value[md5]) {
|
|
|
+ // await new Promise((resolve) => setTimeout(resolve, 500))
|
|
|
+ // }
|
|
|
+ // 添加到正在上传任务中
|
|
|
+ uploadingTasks.value[md5] = true
|
|
|
+ file.startTime = new Date().getTime()
|
|
|
+ file.uploadedSize = 0
|
|
|
+
|
|
|
+ const chunkPromises = []
|
|
|
+
|
|
|
+ for (let i = 0; i < item.chunks.length; i++) {
|
|
|
+ let chunk = item.chunks[i]
|
|
|
+
|
|
|
+ while (pauseFlags.value[md5]) {
|
|
|
+ await new Promise((resolve) => setTimeout(resolve, 500))
|
|
|
+ }
|
|
|
+
|
|
|
+ chunkPromises.push(
|
|
|
+ await uploadFilesChunk(
|
|
|
+ {
|
|
|
+ md5,
|
|
|
+ chunk,
|
|
|
+ chunkIndex: i + 1,
|
|
|
+ fileSuffix: item.fileSuffix,
|
|
|
+ chunkSize: item.chunks.length,
|
|
|
+ fileName: item.name
|
|
|
+ },
|
|
|
+ () => {
|
|
|
+ // chunksUploaded.value++
|
|
|
+ // uploadChunks.value++
|
|
|
+
|
|
|
+ // successfulChunkPercents.value = 100 * (uploadChunks.value / allChunks.value).toFixed(2)
|
|
|
+ item.uploadedSize += chunk.size // 更新已上传大小
|
|
|
+ const remainingTime = estimateRemainingTime(item.startTime, item.uploadedSize, item.size)
|
|
|
+ console.log(`预计剩余时间: ${formatTime(remainingTime)}`)
|
|
|
+ // item.percents = (100 * (uploadChunks.value / item.chunks.length)).toFixed(2)
|
|
|
+ item.time = formatTime(remainingTime)
|
|
|
+
|
|
|
+ const percent = ((i + 1) / item.chunks.length) * 100
|
|
|
+ item.percents = percent.toFixed(2)
|
|
|
+ console.log(`我得名字: `, item.name, ' i ', i, ' item.chunks.length ', item.chunks.length)
|
|
|
+ // item.time = formatTime(estimateRemainingTime())
|
|
|
+ }
|
|
|
+ )
|
|
|
+ )
|
|
|
+ }
|
|
|
+
|
|
|
+ await Promise.all(chunkPromises)
|
|
|
+
|
|
|
+ // 合并分片
|
|
|
+ const mergeResult = await axios.post(
|
|
|
+ sysConfig.API_URL+`/api/webapp/minio/merge?md5=${md5}&fileSuffix=${item.fileSuffix}&chunkTotal=${item.chunks.length}&fileName=${item.name}&fileSize=${item.size}`,
|
|
|
+ null,
|
|
|
+ { headers: { Token: tool.data.get('TOKEN') } }
|
|
|
+ )
|
|
|
+
|
|
|
+ uploadFileList.value[index].userFileId = mergeResult.data.userFileId
|
|
|
+ uploadFileList.value[index].percents = 100
|
|
|
+
|
|
|
+ uploadingTasks.value[item.md5] = false
|
|
|
+ // item.time = '上传完成'
|
|
|
+ // 尝试恢复一个被暂停的任务
|
|
|
+ autoResumePausedUpload()
|
|
|
+ // upLoadTag.value = false
|
|
|
+ emit('onSuccess', uploadFileList.value)
|
|
|
+ }
|
|
|
+
|
|
|
+ // watch(
|
|
|
+ // () => uploadFileList.value,
|
|
|
+ // (newValue) => {
|
|
|
+ // emit('onSuccess', newValue)
|
|
|
+ // },
|
|
|
+ // { immediate: true }
|
|
|
+ // )
|
|
|
+ const autoResumePausedUpload = async () => {
|
|
|
+ const activeTasks = Object.keys(uploadingTasks.value).filter((key) => uploadingTasks.value[key])
|
|
|
+ if (activeTasks.length >= 2) return
|
|
|
+
|
|
|
+ // 查找第一个被暂停的文件
|
|
|
+ for (let i = 0; i < uploadFileList.value.length; i++) {
|
|
|
+ const item = uploadFileList.value[i]
|
|
|
+ if (item.percents > 0 && item.percents < 100 && pauseFlags.value[item.md5] === true) {
|
|
|
+ console.log(`自动恢复 ${item.name}`)
|
|
|
+ pauseFlags.value[item.md5] = false
|
|
|
+ uploadingTasks.value[item.md5] = true
|
|
|
+ await uploadSingleFile(item)
|
|
|
+ break
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ const customRequest = () => {}
|
|
|
+ const getList = () => {
|
|
|
+ axios
|
|
|
+ .get('http://127.0.0.1:9000/api/webapp/disk/minio/list')
|
|
|
+ .then((res) => {
|
|
|
+ this.uploadList = res.data
|
|
|
+ console.log('获取列表结果成功:', res.data)
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ console.error('获取列表失败:', error)
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ const clearFileList = () => {
|
|
|
+ // successfulChunkPercents.value = 0
|
|
|
+ uploadFileList.value = []
|
|
|
+ // fileList.value = []
|
|
|
+ }
|
|
|
+ const open = () => {
|
|
|
+
|
|
|
+ clearFileList()
|
|
|
+ }
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ nextTick(() => {
|
|
|
+ // if ( fileUpload.value && fileUpload.value.$el.querySelector('input')) {
|
|
|
+ // fileUpload.value.$el.querySelector('input').webkitdirectory = true;
|
|
|
+ // }
|
|
|
+ });
|
|
|
+});
|
|
|
+onUpdated(() => {
|
|
|
+ console.log('组件已更新')
|
|
|
+})
|
|
|
+
|
|
|
+const getUploadFileList = () => {
|
|
|
+ return uploadFileList.value
|
|
|
+}
|
|
|
+
|
|
|
+ defineExpose({open, getUploadFileList})
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="less">
|
|
|
+/*大力水手*/
|
|
|
+.mydiv {
|
|
|
+ :deep(.ant-upload-btn) {
|
|
|
+ display: block !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+</style>
|