From b8313f3d399d79a1cf8210c9cef278a364feaf87 Mon Sep 17 00:00:00 2001 From: xzg <4727863@qq.com> Date: Thu, 14 Mar 2024 18:22:34 +0800 Subject: [PATCH] =?UTF-8?q?=E5=88=87=E6=8D=A2=E5=87=BD=E6=95=B0=E5=B0=81?= =?UTF-8?q?=E8=A3=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main.js | 2 + src/util/Fileslicing.js | 105 +++++++++++++++++++++++++ src/views/edutraining/course.vue | 4 +- src/views/edutraining/courseinfo.vue | 112 +-------------------------- 4 files changed, 113 insertions(+), 110 deletions(-) create mode 100644 src/util/Fileslicing.js diff --git a/src/main.js b/src/main.js index c5f1796..341fd1e 100644 --- a/src/main.js +++ b/src/main.js @@ -25,6 +25,7 @@ import website from '@/config/website'; import crudCommon from '@/mixins/crud'; // 业务组件 import tenantPackage from './views/system/tenantpackage'; +import FileslicingPlugin from '../src/util/Fileslicing'; // 注册全局crud驱动 window.$crudCommon = crudCommon; @@ -40,6 +41,7 @@ Vue.use(window.AVUE, { calcHeight: 65, i18n: (key, value) => i18n.t(key, value) }); +Vue.use(FileslicingPlugin); // 注册全局容器 Vue.component('basicContainer', basicContainer); Vue.component('basicBlock', basicBlock); diff --git a/src/util/Fileslicing.js b/src/util/Fileslicing.js new file mode 100644 index 0000000..b6eba17 --- /dev/null +++ b/src/util/Fileslicing.js @@ -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; + }, +}; \ No newline at end of file diff --git a/src/views/edutraining/course.vue b/src/views/edutraining/course.vue index aead54a..7041839 100644 --- a/src/views/edutraining/course.vue +++ b/src/views/edutraining/course.vue @@ -306,11 +306,11 @@ // }, dicData: [ { - label: "干部", + label: "管理岗", value: "1", }, { - label: "群众", + label: "员工岗", value: "2", }, ], diff --git a/src/views/edutraining/courseinfo.vue b/src/views/edutraining/courseinfo.vue index c49ebc6..eb8f7d1 100644 --- a/src/views/edutraining/courseinfo.vue +++ b/src/views/edutraining/courseinfo.vue @@ -57,6 +57,7 @@ import { toDate, } from "@/api/edutraining/courseinfo"; import { createLogger, mapGetters } from "vuex"; +// import {Fileslicing} from '../../util/Fileslicing' import axios from "axios"; export default { props: { @@ -246,114 +247,9 @@ 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(progressPercentage==100){ - this.$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 = ``; - console.log(Stresponse.data, "合并请求成功"); - let url=(Stresponse.data.data.domain + '/'+ Stresponse.data.data.name) - console.log(url,'地址'); - _this.form.videoUrl = url; // 确保根据实际响应更新属性名 - console.log(_this.form.videoUrl, "参数"); - 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; // 出错则停止上传 - } - } - }, + uploadBefore(file, done, loading, column) { + this.$fileslicing(this,file,done,loading,column);//文件切换全局函数(初始) + }, uploadAfter(res, done, loading, column) { console.log(res, column);