视频分块上传Vue3+SpringBoot3+Minio

一、简化演示

分块上传、合并分块

前端将完整的视频文件分割成多份文件块，依次上传到后端，后端将其保存到文件系统。前端将文件块上传完毕后，发送合并请求，后端拿取文件块，合并后重新上传到文件系统。

断点续传

前端遍历文件块，每次上传之前，先询问文件块是否存在，只有不存在的情况下，才会上传。

秒传

前端分割视频文件前，先询问此视频是否已经存在，存在则不再上传，后端之间返回视频信息。前端看起来就像是被秒传了。

二、更详细的逻辑和细节问题

• 视频文件和文件块都通过文件本身计算MD5值作为唯一标志
• 文件系统使用Minio，只要提供buckerName和path就可以操作文件
• 后端合并文件块成功后会删除文件块，并以MD5值为id存入数据库
• Minio存储文件块时，依据其md5值计算path，比如取前两个字符构建二级文件夹，文件名为md5值，无后缀。所以只需要提供文件块的md5值就可以操作文件块。
• Minio存储完整视频文件时，依据其md5值计算path，同上，文件名为md5值，携带.mp4等后缀，所以只需要提供视频文件的md5值就可以操作视频文件。

1. 首先，前端计算视频文件的MD5值，记为fileMd5，传递MD5值来询问后端此视频文件是否存在，后端查询数据库返回结果，如果存在，则前端触发“秒传”。
2. 如果不存在，则将视频文件分割成文件块，循环上传，每次循环，首先计算文件块的md5值，传递md5值询问后端此文件块是否存在，后端根据md5判断文件块是否存在，如果存在，前端跳过此文件块上传，直接标记为上传成功，如果不存在，则上传至后端，后端将其保存到minio。这其实就是“分块上传，断点续传”。
3. 最后所有分块文件都上传成功，前端发起合并请求，传递视频文件的md5值和所有文件块的md5值到后端，后端进行文件块合并、文件块的删除、合并文件的上传，将信息存储在mysql数据库，将执行结果告知前端。这就是“合并分块”

可能存在的隐患

一个视频文件的文件块没有全部上传完成就终止，此时文件块将一直保存在minio中，如果之后此视频再也没有发起过上传请求，那么这些文件块都是是一种垃圾。

可以写一个定时任务，遍历Minio没有后缀的文件块，判断其创建时间距离当前是否足够久，是则删除。

三、代码示例

前端代码

<template>
	<div class="p-2">
		<el-button icon="Plus" plain type="primary" @click="handleAdd">新增</el-button>
		<!-- 添加或修改media对话框 -->
		<el-dialog v-model="dialog.visible" :title="dialog.title" append-to-body width="500px">
			<el-form ref="mediaFormRef" :model="form" :rules="rules" label-width="80px">
				<el-form-item label="上传视频" prop="originalName" v-show="dialog.title=='添加视频'">
					<el-upload
						ref="uploadRef"
						:http-request="onUpload"
						:before-upload="beforeUpload"
						:limit="1"
						action="#"
						class="upload-demo"
					>
						<template #trigger>
							<el-button type="primary">选择视频</el-button>
						</template>
						<template #tip>
							<div class="el-upload__tip">
								支持分块上传、端点续传
							</div>
						</template>
					</el-upload>
				</el-form-item>
				<el-form-item v-show="percentageShow">
					<el-progress :percentage="percentage" style="width: 100%"/>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script lang="ts" name="Media" setup>
import type {
     UploadInstance, UploadRawFile, UploadRequestOptions, UploadUserFile} from 'element-plus'
import SparkMD5 from "spark-md5";
import {
     HttpStatus} from "@/enums/RespEnum";

const dialog = reactive<DialogOption>({
     
	visible: false,
	title: ''
});
//上传视频
const baseUrl = import.meta.env.VITE_APP_BASE_API;
const uploadImgUrl = ref(baseUrl +