OnlineEducation-student-front/src/components/UpLoadBreakPoint/index.vue

<template>
	<div>
		<a-upload-dragger
			:file-list="fileList"
			:before-upload="beforeUpload"
			@change="handleChange"
			:show-upload-list="false"
			:customRequest="customRequest"
			:multiple="false"
			:drag="true"
			:progress="progress"
		>
			<div style="padding: 40px; text-align: center">
				<span class="text"> 点击上传或将文件拖拽至此区域上传 </span>
				<p class="text">按住Ctrl可同时多选，支持上传PPT/excel/pdf/mp4/zip/rar，等单个文件不能超过2G</p>
			</div>
		</a-upload-dragger>

		<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 }}</span>
					</div>
					<div>
						<span v-if="item.time != ''" style="display: block; color: blue">{{ item.time }}</span>
						<span
							v-if="item.percents == 0 || item.percents == 100"
							style="color: red; cursor: pointer; margin-left: 10px"
							@click="handlerRemoveItem(index)"
							>删除</span
						>
					</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 SparkMD5 from 'spark-md5'
	import tool from '@/utils/tool'
	import { message } from 'ant-design-vue'
	//当前选中的文件
	const currentFile = ref(null)
	const chunkSize = ref(5 * 1024 * 1024)

	const uploadedSize = ref(0) // 已上传文件大小（字节）

	const chunkCount = ref(0)
	const chunksUploaded = ref(0)
	const fileMd5 = ref('') //
	const emit = defineEmits(['onUpLoading', 'onSuccess'])
	const progress = {
		strokeColor: {
			'0%': '#108ee9',
			'100%': '#87d068'
		},
		strokeWidth: 3,
		format: (percent) => `${parseFloat(percent.toFixed(2))}%`,
		class: 'test'
	}
	const allChunks = ref(0) // 文件的md5值
	const successfulChunkPercents = ref(0) // 上传成功的分片百分比
	const fileSuffix = ref('') // 文件后缀
	const chunkList = ref([]) // 文件后缀
	const uploadList = ref([]) // 文件后缀
	const fileList = ref([]) // 文件后缀
	const uploadFileList = ref([]) // 文件后缀
	const uploadChunks = ref([]) // 文件后缀

	const upLoadTag = ref(false) // 文件的md5值
	const startTime = ref(0) // 开始时间戳（毫秒
	const totalSize = ref(0) // 开始时间戳（毫秒
	const handlerRemoveItem = (index) => {
		uploadFileList.value.splice(index, 1)
		emit('onSuccess', uploadFileList.value)
	}

	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 = () => {
		const currentTime = new Date().getTime()
		const timeElapsed = (currentTime - startTime.value) / 1000 // 单位：秒
		if (timeElapsed > 0) {
			const speed = uploadedSize.value / timeElapsed // 单位：字节/秒
			return speed
		}
		return 0
	}
	const estimateRemainingTime = () => {
		console.log('疑问', ' 总的 ', totalSize.value, ' 变化的 ', uploadedSize.value)
		const remainingSize = totalSize.value - uploadedSize.value // 剩余文件大小
		const speed = calculateSpeed() // 平均上传速度（字节/秒）

		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) => {
		fileMd5.value = ''
		successfulChunkPercents.value = 0
		// 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哈希值
		fileMd5.value = await calculateFileMD5(file.raw)
		// fileMd5.value = md5(fileContent)
		console.log('111文件的md5哈希值是：', fileMd5.value)

		console.log('file对象的大小：', file.size)
		console.log('file对象：', file)
		chunkCount.value = Math.ceil(file.size / chunkSize.value) // 还是计算分块数量，向上取整
		chunksUploaded.value = 0 // 已上传的分片数量
		fileSuffix.value = '.' + file.raw.name.split('.').pop() // 得到.文件类型
		successfulChunkPercents.value = 0 // 上传成功的分片百分比
		currentFile.value = await new Promise((resolve, reject) => {
			console.log('====开始获取File对象了...')
			resolve(file.raw)
			reject('获取File对象失败')
		})

		// 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)
		// }
		splitFileByChunkSize(currentFile.value, chunkSize.value)

		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
		// )
		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.value[i] = file.slice(start, end) // 注意：slice 是 [start, end) 前闭后开区间

			console.log(
				'准备开始:',
				' 循环次数 ',
				i,
				' 块数 ',
				chunkCount,
				'开始的大小',
				start,
				'结束的大小',
				end,
				' file ',
				file.slice(start, end)
			)
		}

		console.log('分片完成:', chunkList.value)
	}

	// 点击上传按钮触发多文件上传 ===============
	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('/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)
					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]}`
					`/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
		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('/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('/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(`/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
	}
	const beforeUpload = (file) => {
		handleFileChange({ raw: file })
		return false // 阻止默认上传
	}
	const handleChange = (info) => {
		const { file } = info
		if (file.status === 'removed') {
			fileList.value = []
			clearFileList()
		}
	}

	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 = []
	}

	onMounted(() => {
		// getList()
	})
</script>

<style scoped></style>