|
|
|
|
@ -1,4 +1,5 @@
|
|
|
|
|
<template> |
|
|
|
|
|
|
|
|
|
<basic-container> |
|
|
|
|
<avue-crud |
|
|
|
|
:option="option" |
|
|
|
|
@ -19,6 +20,8 @@
|
|
|
|
|
@size-change="sizeChange" |
|
|
|
|
@refresh-change="refreshChange" |
|
|
|
|
@on-load="onLoad" |
|
|
|
|
:upload-before="uploadBefore" |
|
|
|
|
:upload-after="uploadAfter" |
|
|
|
|
> |
|
|
|
|
<template slot="menuLeft"> |
|
|
|
|
<el-button |
|
|
|
|
@ -55,7 +58,7 @@ import {
|
|
|
|
|
toDate, |
|
|
|
|
} from "@/api/edutraining/courseinfo"; |
|
|
|
|
import { createLogger, mapGetters } from "vuex"; |
|
|
|
|
|
|
|
|
|
import axios from "axios"; |
|
|
|
|
export default { |
|
|
|
|
props: { |
|
|
|
|
courseId: { |
|
|
|
|
@ -68,6 +71,15 @@ export default {
|
|
|
|
|
form: {}, |
|
|
|
|
query: {}, |
|
|
|
|
loading: true, |
|
|
|
|
percentage: 0, |
|
|
|
|
jdState: false, |
|
|
|
|
colors: [ |
|
|
|
|
{ color: "#f56c6c", percentage: 20 }, |
|
|
|
|
{ color: "#e6a23c", percentage: 40 }, |
|
|
|
|
{ color: "#5cb87a", percentage: 60 }, |
|
|
|
|
{ color: "#1989fa", percentage: 80 }, |
|
|
|
|
{ color: "#6f7ad3", percentage: 100 }, |
|
|
|
|
], |
|
|
|
|
page: { |
|
|
|
|
pageSize: 10, |
|
|
|
|
currentPage: 1, |
|
|
|
|
@ -117,7 +129,7 @@ export default {
|
|
|
|
|
// listType: "picture-img", |
|
|
|
|
dataType: "string", |
|
|
|
|
fileType: "video", //img/video/audio |
|
|
|
|
action: "/api/blade-resource/oss/endpoint/put-file", |
|
|
|
|
action: "#", |
|
|
|
|
propsHttp: { |
|
|
|
|
res: "data", |
|
|
|
|
url: "link", |
|
|
|
|
@ -205,15 +217,27 @@ export default {
|
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
rowSave(row, done, loading) { |
|
|
|
|
console.log(this, "row"); |
|
|
|
|
|
|
|
|
|
row.courseId = this.courseId; //将章节关联到课程 |
|
|
|
|
// row = { ...row, courseId: this.$route.query.courseId }; |
|
|
|
|
add(row).then( |
|
|
|
|
() => { |
|
|
|
|
console.log( |
|
|
|
|
this.option.column.find((res) => res.label == "视频地址"), |
|
|
|
|
"筛选出来的" |
|
|
|
|
); |
|
|
|
|
this.option.column.find((res) => res.label == "视频地址").tip = |
|
|
|
|
"请上传视频、音频文件（只能上传一个文件）"; |
|
|
|
|
console.log( |
|
|
|
|
this.option.column.find((res) => res.label == "视频地址").tip |
|
|
|
|
); |
|
|
|
|
this.onLoad(this.page); |
|
|
|
|
this.$message({ |
|
|
|
|
type: "success", |
|
|
|
|
message: "操作成功!", |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
done(); |
|
|
|
|
}, |
|
|
|
|
(error) => { |
|
|
|
|
@ -222,6 +246,111 @@ export default {
|
|
|
|
|
} |
|
|
|
|
); |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
async uploadBefore(file, done, loading, column) { |
|
|
|
|
let _this = this; |
|
|
|
|
console.log(_this, "SS组件"); |
|
|
|
|
console.log(file, column); |
|
|
|
|
console.log("上传前的方法"); |
|
|
|
|
const CHUNK_SIZE = 1 * 1024 * 1024; // 定义分片的大小，例如1MB |
|
|
|
|
// const CHUNK_SIZE = 512 * 1024; // 定义分片的大小，例如1MB |
|
|
|
|
const totalChunks = Math.ceil(file.size / CHUNK_SIZE); // 计算总分片数 |
|
|
|
|
let uploadedChunks = 0; // 已上传的分片数 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const overallStartTime = performance.now(); // 函数开始执行时的时间 |
|
|
|
|
for (let index = 0; index < totalChunks; index++) { |
|
|
|
|
const start = index * CHUNK_SIZE; |
|
|
|
|
const end = Math.min(start + CHUNK_SIZE, file.size); |
|
|
|
|
const blob = file.slice(start, end); // 获取当前分片的内容 |
|
|
|
|
|
|
|
|
|
const chunkFile = new File([blob], `${file.name}-${index}`, { |
|
|
|
|
type: file.type, |
|
|
|
|
}); // 根据需要修改文件名以包含分片信息 |
|
|
|
|
const formData = new FormData(); |
|
|
|
|
formData.append("file", chunkFile); |
|
|
|
|
formData.append("chunkNumber", index); |
|
|
|
|
formData.append("totalChunks", totalChunks); |
|
|
|
|
formData.append("fileName", file.name); |
|
|
|
|
|
|
|
|
|
try { |
|
|
|
|
const response = await axios.post( |
|
|
|
|
"/api/blade-resource/oss/endpoint/chunk", |
|
|
|
|
formData, |
|
|
|
|
{ |
|
|
|
|
headers: { |
|
|
|
|
"Content-Type": "multipart/form-data", |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
console.log(`Chunk ${index} uploaded successfully:`, response.data); |
|
|
|
|
uploadedChunks++; // 更新已上传的分片数量 |
|
|
|
|
// 计算并显示上传进度 |
|
|
|
|
const progressPercentage = ( |
|
|
|
|
(uploadedChunks / totalChunks) * |
|
|
|
|
100 |
|
|
|
|
).toFixed(2); |
|
|
|
|
console.log(`Upload progress: ${progressPercentage}%`); |
|
|
|
|
this.$notify.info({ |
|
|
|
|
title: "进度", |
|
|
|
|
message: `当前上传进度: ${progressPercentage}%`, |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
// 这里可以根据需要更新进度条或进度文本 |
|
|
|
|
|
|
|
|
|
if (index === totalChunks - 1) { |
|
|
|
|
|
|
|
|
|
const fileData = { |
|
|
|
|
fileName: file.name, |
|
|
|
|
totalChunks: totalChunks, |
|
|
|
|
}; |
|
|
|
|
const Stresponse = await axios.post( |
|
|
|
|
"/api/blade-resource/oss/endpoint/mergeFile", |
|
|
|
|
fileData, |
|
|
|
|
{ |
|
|
|
|
headers: { |
|
|
|
|
"Content-Type": "application/json", |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
if (Stresponse.data.code === 200) { |
|
|
|
|
const overallEndTime = performance.now(); // 函数结束时的时间 |
|
|
|
|
const totalFunctionTime = (overallEndTime - overallStartTime) / 1000; // 总执行时间，转换为秒 |
|
|
|
|
column.tip = ``; |
|
|
|
|
console.log(Stresponse.data, "合并请求成功"); |
|
|
|
|
_this.form.videoUrl = |
|
|
|
|
Stresponse.data.data.domain + Stresponse.data.data.path; // 确保根据实际响应更新属性名 |
|
|
|
|
loading(); |
|
|
|
|
this.$message.success( |
|
|
|
|
`上传成功:文件名:${file.name},文件大小${( |
|
|
|
|
file.size / |
|
|
|
|
(1024 * 1024) |
|
|
|
|
).toFixed(2)} MB, 上传进度: ${progressPercentage}%,总耗时:${totalFunctionTime.toFixed(2)}秒` |
|
|
|
|
); |
|
|
|
|
} else { |
|
|
|
|
loading(); |
|
|
|
|
console.error("合并请求失败", Stresponse.data); |
|
|
|
|
this.$message.error("文件合并失败"); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} catch (error) { |
|
|
|
|
console.error(`Error uploading chunk ${index}:`, error); |
|
|
|
|
this.$message.error("上传出错"); |
|
|
|
|
loading(); |
|
|
|
|
return; // 出错则停止上传 |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
uploadAfter(res, done, loading, column) { |
|
|
|
|
console.log(res, column); |
|
|
|
|
done(); |
|
|
|
|
console.log("上传后的方法"); |
|
|
|
|
this.$message.success("上传后的方法"); |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
rowUpdate(row, index, done, loading) { |
|
|
|
|
update(row).then( |
|
|
|
|
() => { |
|
|
|
|
@ -344,4 +473,5 @@ export default {
|
|
|
|
|
}; |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style></style> |
|
|
|
|
<style> |
|
|
|
|
</style> |
|
|
|
|
|
