4 changed files with 113 additions and 110 deletions
@ -0,0 +1,105 @@
|
||||
// 引入axios进行http请求
|
||||
import axios from "axios"; |
||||
// 异步函数Fileslicing，用于处理文件的分片上传
|
||||
async function Fileslicing(vueInstance, file, done, loading, column) { |
||||
let _this = vueInstance; // 将vue实例保存在_this中，用于后续引用
|
||||
const CHUNK_SIZE = 1 * 1024 * 1024; // 定义每个分片的大小为1MB
|
||||
// const CHUNK_SIZE = 512 * 1024; // 或定义分片大小为500KB
|
||||
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上传分片
|
||||
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", |
||||
}, |
||||
} |
||||
); |
||||
uploadedChunks++; // 上传成功后，已上传分片数+1
|
||||
// 计算并显示上传进度
|
||||
const progressPercentage = ((uploadedChunks / totalChunks) * 100).toFixed(2); |
||||
// 显示上传进度的通知
|
||||
vueInstance.$notify.info({ |
||||
title: "进度", |
||||
message: `当前上传进度: ${progressPercentage}%`, |
||||
}); |
||||
if(progressPercentage == 100){ |
||||
// 如果上传进度达到100%，显示文件上传完成的通知
|
||||
vueInstance.$notify({ |
||||
type: 'success', |
||||
title: "通知", |
||||
message: `文件已上传完成！正在处理中请稍等......`, |
||||
}); |
||||
} |
||||
|
||||
// 如果当前分片是最后一个分片
|
||||
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 = ``; // 可根据需要进行操作
|
||||
let url = (Stresponse.data.data.domain + '/' + Stresponse.data.data.name); |
||||
_this.form.videoUrl = url; // 更新vue实例中的视频URL
|
||||
loading(); // 可能是结束加载状态的函数
|
||||
// 显示上传成功的消息
|
||||
vueInstance.$message.success( |
||||
`上传成功:文件名:${file.name},文件大小${(file.size / (1024 * 1024)).toFixed(2)} MB, 上传进度: ${progressPercentage}%,总耗时:${totalFunctionTime.toFixed(2)}秒` |
||||
); |
||||
} else { |
||||
// 如果文件合并失败
|
||||
loading(); |
||||
vueInstance.$message.error("文件合并失败"); |
||||
} |
||||
} |
||||
} catch (error) { |
||||
// 如果上传过程中出现错误
|
||||
vueInstance.$message.error("上传出错"); |
||||
loading(); // 结束加载状态
|
||||
return; // 停止执行
|
||||
} |
||||
} |
||||
} |
||||
|
||||
// 导出Fileslicing函数，使其在Vue实例中可用
|
||||
export default { |
||||
install(Vue) { |
||||
Vue.prototype.$fileslicing = Fileslicing; |
||||
}, |
||||
}; |
||||
Loading…
Reference in new issue