md5.js
import SparkMD5 from 'spark-md5'
const DEFAULT_SIZE = 20 * 1024 * 1024
const md5 = (file, chunkSize = DEFAULT_SIZE) => {
return new Promise((resolve, reject) => {
const startMs = new Date().getTime();
let blobSlice =
File.prototype.slice ||
File.prototype.mozSlice ||
File.prototype.webkitSlice;
let chunks = Math.ceil(file.size / chunkSize);
let currentChunk = 0;
let spark = new SparkMD5.ArrayBuffer(); //追加数组缓冲区。
let fileReader = new FileReader(); //读取文件
fileReader.onload = function (e) {
spark.append(e.target.result);
currentChunk++;
if (currentChunk < chunks) {
loadNext();
} else {
const md5 = spark.end(); //完成md5的计算，返回十六进制结果。
console.log('文件md5计算结束，总耗时：', (new Date().getTime() - startMs) / 1000, 's')
resolve(md5);
}
};
fileReader.onerror = function (e) {
reject(e);
};
function loadNext() {
console.log('当前part number：', currentChunk, '总块数：', chunks);
let start = currentChunk * chunkSize;
let end = start + chunkSize;
(end > file.size) && (end = file.size);
fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
}
loadNext();
});
}
export default md5
videoAdd.vue
<template>
<div class='video-add'>
<a-spin :spinning="butonLoading">
<a-upload v-model:file-list="fileList" name="file" action="/" :customRequest="handleHttpRequest" type="line"
:onRemove="handleRemoveFile" accept=".mp4,.ogg,.flv,.avi,.wmv,.rmvb,.mov" maxCount="1">
<a-button v-if="!showPercent">选择文件</a-button>
<a-tooltip color="#fff" title="若已存在视频，继续上传将会覆盖原有视频" :overlayInnerStyle="{ color: '#000' }">
<i class="iconfont tooltip-icon icon-tishi mr-8"></i>
</a-tooltip>
</a-upload>
<div class="flex f-between mt-20" v-if="datas?.fileName">
<span>{{ datas.fileName }}</span>
<div class="flex">
<a-popconfirm title="确认删除当前视频？" ok-text="确认" cancel-text="取消" @confirm="confirmDel(datas)">
<i class="iconfont icon-shanchu1"></i>
</a-popconfirm>
</div>
</div>
<a-progress v-if="showPercent" :percent="percent" />
<a-space class="flex f-end mt-30">
<a-button @click="() => emit('update:open', false)">取消</a-button>
</a-space>
<CommonModal v-model:open="open" title="使用链接上传文件" width="fit-content" :footer="false">
<videoInfo v-model:open="open" :info="info" @closeModel="closeModal" />
</CommonModal>
</a-spin>
</div>
</template>
<script setup lang='ts'>
import md5 from '@/utils/md5'
import { taskInfo, initTask, preSignUrl, merge } from '@/request/uploadVideo';
import Queue from 'promise-queue-plus';
import axios from "axios";
import { ref, inject, watch } from 'vue'
import videoInfo from './videoInfo.vue';
import { delChapterVideo, getChapterVideo } from "@/request/courseManagement";
import { message } from 'ant-design-vue';
import { cloneDeep } from "lodash-es";
const props = defineProps({
info: {
default: null,
type: Object
}
})
const fileList = ref([])
const emit = defineEmits(['update:open'])
const open = ref(false)
const butonLoading = ref<boolean>(false);
const percent = ref(0)
const datas: any = ref({
fileName: null
});
const videoRef = ref();
let copyData = ref([])
let video = ref()
const closeModal = () => {
open.value = false
changeVisible()
getData()
}
const showPercent = ref(false)
const changeVisible: any = inject("changeVisible") //关闭弹窗
const getData: any = inject("getData")
// 确认删除视频
const confirmDel = data => {
delChapterVideo({ chapterId: data.chapterId, }).then((res: any) => {
if (res.code === 200) {
datas.value = null
message.success('删除成功')
getData()
} else {
message.error(res.msg)
}
})
}
// 获取视频列表
const getVideoNameList = () => {
getChapterVideo({ chapterId: props.info.id, }).then((res: any) => {
if (res.code === 200) {
datas.value = res.data
copyData = cloneDeep(res.data)
} else {
message.error(res.msg)
}
})
}
watch(() => props.info, val => {
if (val) {
getVideoNameList()
}
}, { immediate: true, deep: true })
const getTaskInfo = async (file) => {
let task;
const identifier = await md5(file)
const { code, data, msg } = await taskInfo(identifier, props.info.id)
if (code === 200) {
task = data
if (!task) {
const initTaskData = {
identifier,
fileName: file.name,
totalSize: file.size,
chunkSize: 5 * 1024 * 1024,
chapterId: props.info.id
}
const { code, data, msg } = await initTask(initTaskData)
if (code === 200) {
task = data
} else {
message.error({
title: '文件上传错误',
message: msg
})
}
}
} else {
message.error({
title: '文件上传错误',
message: msg
})
}
return task
}
const handleUpload = (file, taskRecord: any, options) => {
let lastUploadedSize: any = 0; // 上次断点续传时上传的总大小
let uploadedSize = 0 // 已上传的大小
const totalSize = file.size || 0 // 文件总大小
let startMs = new Date().getTime(); // 开始上传的时间
const { exitPartList, chunkSize, chunkNum, fileIdentifier } = taskRecord
// 获取从开始上传到现在的平均速度（byte/s）
const getSpeed = () => {
// 已上传的总大小 - 上次上传的总大小（断点续传）= 本次上传的总大小（byte）
const intervalSize = uploadedSize - lastUploadedSize
const nowMs = new Date().getTime()
// 时间间隔（s）
const intervalTime = (nowMs - startMs) / 1000
return intervalSize / intervalTime
}
const uploadNext = async (partNumber) => {
const start: any = new Number(chunkSize) * (partNumber - 1)
const end = start + new Number(chunkSize)
const blob = file.slice(start, end)
const { code, data, msg } = await preSignUrl({ identifier: fileIdentifier, partNumber: partNumber, chapterId: props.info.id })
if (code === 200 && data) {
await axios.request({
url: data,
method: 'PUT',
data: blob,
headers: { 'Content-Type': 'application/octet-stream' }
})
return Promise.resolve({ partNumber: partNumber, uploadedSize: blob.size })
}
return Promise.reject(`分片${partNumber}， 获取上传地址失败`)
}
/**
* 更新上传进度
* @param increment 为已上传的进度增加的字节量
*/
const updateProcess = (increment) => {
increment = new Number(increment)
const { onProgress } = options
console.log('onProgress', onProgress)
let factor = 1000; // 每次增加1000 byte
let from = 0;
// 通过循环一点一点的增加进度
while (from <= increment) {
from += factor
uploadedSize += factor
const percent = Math.round(uploadedSize / totalSize * 100).toFixed(2);
onProgress({ percent: percent })
}
const speed = getSpeed();
const remainingTime = speed != 0 ? Math.ceil((totalSize - uploadedSize) / speed) + 's' : '未知'
console.log('剩余大小：', (totalSize - uploadedSize) / 1024 / 1024, 'mb');
console.log('当前速度：', (speed / 1024 / 1024).toFixed(2), 'mbps');
console.log('预计完成：', remainingTime);
}
return new Promise(resolve => {
const failArr = [];
const queue = Queue(5, {
"retry": 3, //Number of retries
"retryIsJump": false, //retry now?
"workReject": function (reason, queue) {
failArr.push(reason)
},
"queueEnd": function (queue) {
resolve(failArr);
}
})
fileUploadChunkQueue[file.uid] = queue
for (let partNumber = 1; partNumber <= chunkNum; partNumber++) {
const exitPart = (exitPartList || []).find(exitPart => exitPart.partNumber == partNumber)
if (exitPart) {
// 分片已上传完成，累计到上传完成的总额中,同时记录一下上次断点上传的大小，用于计算上传速度
lastUploadedSize += new Number(exitPart.size)
updateProcess(exitPart.size)
} else {
queue.push(() => uploadNext(partNumber).then(res => {
// 单片文件上传完成再更新上传进度
updateProcess(res.uploadedSize)
}))
}
}
if (queue.getLength() == 0) {
// 所有分片都上传完，但未合并，直接return出去，进行合并操作
resolve(failArr);
return;
}
queue.start()
})
}
const handleHttpRequest = async (options) => {
const file = options.file
const task = await getTaskInfo(file)
if (task) {
const { finished, path, taskRecord } = task
const { fileIdentifier: identifier } = taskRecord
if (finished) {
fileList.value[0].status = 'finished'
message.success('视频提交成功,后台解析中...')
changeVisible()
await getData()
return path
} else {
const errorList: any = await handleUpload(file, taskRecord, options)
if (errorList.length > 0) {
message.error({
title: '文件上传错误',
message: '部分分片上次失败，请尝试重新上传文件'
})
return;
}
const { code, data, msg } = await merge(identifier, props.info.id)
if (code === 200) {
fileList.value[0].status = 'finished'
message.success('视频提交成功,后台解析中...')
changeVisible()
await getData()
return path
} else {
message.error({
title: '文件上传错误',
message: msg
})
}
}
} else {
message.error({
title: '文件上传错误',
message: '获取上传任务失败'
})
}
}
const fileUploadChunkQueue = ref({}).value
const handleRemoveFile = (uploadFile, uploadFiles) => {
const queueObject = fileUploadChunkQueue[uploadFile.uid]
if (queueObject) {
queueObject.stop()
fileUploadChunkQueue[uploadFile.uid] = undefined
}
}
</script>
<style lang='less' scoped>
.video-add {
min-width: 500px;
.mockvideo {
background-color: #000;
width: 100%;
height: 140px;
display: flex;
justify-content: center;
align-items: center;
.anticon {
color: #fff;
font-size: 1.5rem;
}
}
width: 300px;
.icon-shanchu1 {
color: #FF4D4F;
cursor: pointer;
}
.icon-bianji3 {
color: #08A8FD;
}
}
</style>
