From d60b5adb62fb7a176c96a645cc38b83e7da87af4 Mon Sep 17 00:00:00 2001 From: pan <380711010@qq.com> Date: Sat, 7 Sep 2024 20:52:35 +0800 Subject: [PATCH] =?UTF-8?q?1=E3=80=81=E5=B7=A6=E4=BE=A7=E8=8F=9C=E5=8D=95?= =?UTF-8?q?=E6=A0=91=E5=92=8C=E6=8C=89=E9=92=AE=E6=A0=B7=E5=BC=8F=E8=B0=83?= =?UTF-8?q?=E6=95=B4=202=E3=80=81=E4=B8=8A=E4=BC=A0=E6=96=87=E4=BB=B6?= =?UTF-8?q?=E5=A4=B9=E9=80=BB=E8=BE=91=E8=B0=83=E6=95=B4=203=E3=80=81?= =?UTF-8?q?=E6=96=87=E6=A1=A3=E5=B7=A5=E5=85=B7=E8=AF=A6=E6=83=85=E6=96=B0?= =?UTF-8?q?=E5=A2=9E=E9=A2=84=E8=A7=88=204=E3=80=81=E6=89=80=E6=9C=89?= =?UTF-8?q?=E7=9A=84=E9=A2=84=E8=A7=88=E5=8A=9F=E8=83=BD=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=E9=81=AE=E7=BD=A9=E5=A4=84=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../FileUpload/optimizeToolUpload.vue | 315 +++++++++++++++--- src/layout/components/Navbar.vue | 4 +- src/views/document/detail.vue | 3 +- src/views/document/downloadFileDetail.vue | 2 +- src/views/document/editDocument.vue | 11 +- src/views/filestatistic/index.vue | 1 - src/views/message/index.vue | 4 + src/views/tool/downloadFileDetail.vue | 3 +- src/views/tool/toolDetail.vue | 2 +- .../workflowList/addWorkflow/tool_release.vue | 15 +- 10 files changed, 296 insertions(+), 64 deletions(-) diff --git a/src/components/FileUpload/optimizeToolUpload.vue b/src/components/FileUpload/optimizeToolUpload.vue index 4ec4efe..a13e58a 100644 --- a/src/components/FileUpload/optimizeToolUpload.vue +++ b/src/components/FileUpload/optimizeToolUpload.vue @@ -4,7 +4,7 @@ :before-upload="beforeUpload" :on-change="onChange" :on-remove="handleRemove" - :multiple="isMultiple" + :multiple="false" :on-exceed="handleExceed" :accept="acceptType" :file-list="fileList" @@ -18,11 +18,7 @@ - - -
@@ -34,7 +30,6 @@ import axios from 'axios' import { getToken } from "@/utils/auth"; -import JSZip from 'jszip' export default { props: { @@ -96,6 +91,8 @@ export default { uploadedNum: 0, _shardCount: null, //是否最后一片 isFolder: false, + totalFiles: 0, // 总文件数量 + uploadedCount: 0, // 已上传文件数量 }; }, watch: { @@ -196,38 +193,42 @@ export default { }); }) } else { - self.uploadedNum = 0 - file._shardCount = Math.ceil(file.size / this.partSize) //总片数 - file.uploaded = 0 - let formData = new FormData() - formData.append('fileName', file.name) - //大文件上传初始化,返回uploadId initUpload(formData) - axios({ - url: process.env.VUE_APP_BASE_API + "/common/initUpload", - method: 'post', - data: formData, - headers: { - 'Authorization': 'Bearer ' + getToken(), - 'Content-Type': 'multipart/form-data' - }, - }).then(function (res) { - if (res.status == 200) { - //从第0块开始上传 - file.uploadId = res.data.uploadId - file.objectKey = res.data - file.chunkId = 0 - self.uploadByChunk(file) - } else { - this.progress-- - self.$message.error(res.msg) - } - }).catch(error => { - self.progressPercent = 0 - self.progressFlag = false; - console.error(error) - }) + self.uploadIdSharding(file); } + }, + uploadIdSharding(file){ + let self = this + self.uploadedNum = 0 + file._shardCount = Math.ceil(file.size / this.partSize) //总片数 + file.uploaded = 0 + let formData = new FormData() + formData.append('fileName', file.name) + //大文件上传初始化,返回uploadId initUpload(formData) + axios({ + url: process.env.VUE_APP_BASE_API + "/common/initUpload", + method: 'post', + data: formData, + headers: { + 'Authorization': 'Bearer ' + getToken(), + 'Content-Type': 'multipart/form-data' + }, + }).then(function (res) { + if (res.status == 200) { + //从第0块开始上传 + file.uploadId = res.data.uploadId + file.objectKey = res.data + file.chunkId = 0 + self.uploadByChunk(file) + } else { + this.progress-- + self.$message.error(res.msg) + } + }).catch(error => { + self.progressPercent = 0 + self.progressFlag = false; + console.error(error) + }) }, //分片上传大文件 uploadByChunk(file) { @@ -254,7 +255,6 @@ export default { 'Authorization': 'Bearer ' + getToken(), 'Content-Type': 'multipart/form-data' }, - }).then(response => { if (response.status == 200) { //判断返回的MD5值是否一致，一致继续传下一块，否则重传本块（这里目前前后端MD5一直不一致，暂时先注释掉，有时间了我再研究一下） @@ -327,6 +327,7 @@ export default { }) } }, + resetData() { this.progress = 0; }, @@ -346,7 +347,6 @@ export default { }, /** 清空文件 **/ clearFile(){ - this.progressFlag = false; if(this.$refs.upload){ this.$refs.upload.clearFiles(); } @@ -357,7 +357,7 @@ export default { document.getElementById("fileFolder").value = null; this.$refs.fileRef.dispatchEvent(new MouseEvent("click")); }, - async handleFolderUpload(event) { +/* async handleFolderUpload(event) { let self = this; self.isFolder = true const files = event.target.files; @@ -376,17 +376,236 @@ export default { } await self.uploadFile(temp); } - /* console.info("files=========", files) - let fileListTemp = [] - for(let item of files){ - fileListTemp.push(item); + }, */ + + /* // 处理文件夹上传 + async handleFolderUpload(event) { + const files = event.target.files; + this.isFolder = true; + this.progressFlag = true; + + if (files.length === 0) { + this.$message.warning('没有选择文件'); + return; + } + + let successCount = 0; + let failCount = 0; + for (const file of files) { + try { + await this.uploadFolderFile({ file }); + successCount++; + } catch (error) { + failCount++; + } + } + + this.$message.success(`上传完成！成功：${successCount}，失败：${failCount}`); + this.progressFlag = false; + this.progressPercent = 0; + }, */ + // 单个文件上传 + uploadFolderFile({ data, file }) { + let self = this + //初始化参数 + if (file.size < this.partSize) { + return new Promise((resolve, reject) => { + const formData = new FormData(); + formData.append("file", file); + this.progressFlag = true; + + axios({ + url: self.uploadUrl, + method: 'post', + data: formData, + headers: { + 'Authorization': 'Bearer ' + getToken(), + 'Content-Type': 'multipart/form-data' + }, + /* onUploadProgress: progressEvent => { + this.progressPercent = ((progressEvent.loaded / progressEvent.total) * 100) | 0; + } */ + }).then(res => { + setTimeout(() => { + if (res.data.code === 200) { + // self.progressFlag = false; + // self.progressPercent = 0; + self.handleResult(res,file); + resolve(); // 上传成功后，调用 resolve + } else { + // self.progressFlag = false; + self.$message.error(file.name + '上传失败！'); + reject(); // 上传失败时调用 reject + } + }, 500); + }).catch(error => { + // self.progressFlag = false; + // self.progressPercent = 0; + self.$message.error(file.name + '上传失败！'); + reject(error); // 上传失败时调用 reject + }); + }); + }else{ + return new Promise((resolve, reject) => { + self.uploadIdShardingFolder(file) + .then(() => { + resolve(); // 上传成功，继续下一个文件 + }) + .catch(error => { + reject(error); // 上传失败，触发 reject + }); + }); } - self.fileList = fileListTemp; */ - /* files.for() - self.onChange(null, files); */ - // self.fileList = files; - // this.$refs.fileRef.value = null; }, + + + async handleFolderUpload(event) { + const files = Array.from(event.target.files); + this.totalFiles = files.length; + this.uploadedCount = 0; + this.progressFlag = true; + let failCount = 0; + for (let i = 0; i < files.length; i++) { + try { + await this.uploadFolderFile( + { + data: null, + file: files[i] + } + ); + this.uploadedCount++; + this.updateProgress(); + } catch (error) { + failCount++; + } + } + this.$message.success('上传完成！成功：' + this.uploadedCount+'，失败：' + failCount); + this.progressFlag = false; + this.progressPercent = 0; + }, + updateProgress() { + if (this.uploadedCount === this.totalFiles) { + this.progressPercent = 100; + } else { + this.progressPercent = Math.min(100, Math.floor((this.uploadedCount / this.totalFiles) * 100)); + } +/* + if (this.uploadedCount % 10 === 0 || this.uploadedCount === this.totalFiles) { + this.$message.success(`已上传 ${this.uploadedCount} 个文件`); + } */ + }, + + // 初始化分片上传 + uploadIdShardingFolder(file) { + let self = this + return new Promise((resolve, reject) => { + file._shardCount = Math.ceil(file.size / this.partSize); // 总片数 + file.uploaded = 0; + + const formData = new FormData(); + formData.append('fileName', file.name); + + // 大文件上传初始化, 返回 uploadId + axios({ + url: process.env.VUE_APP_BASE_API + "/common/initUpload", + method: 'post', + data: formData, + headers: { + 'Authorization': 'Bearer ' + getToken(), + 'Content-Type': 'multipart/form-data' + }, + }).then(res => { + if (res.status === 200) { + file.uploadId = res.data.uploadId; + file.chunkId = 0; + this.uploadByChunkFolder(file) + .then(() => resolve()) // 全部分片上传完成，返回 resolve + .catch(error => reject(error)); // 分片上传出错，返回 reject + } else { + reject(new Error('初始化上传失败')); + } + }).catch(error => { + reject(error); + }); + }); + }, + + // 分片上传逻辑 + uploadByChunkFolder(file) { + let self = this + return new Promise((resolve, reject) => { + const uploadChunk = (chunkId) => { + const _start = chunkId * this.partSize; + const _end = Math.min(file.size, _start + this.partSize); + const fileData = file.slice(_start, _end); + + const form1 = new FormData(); + form1.append('chunkFile', fileData); + form1.append('uploadId', file.uploadId); + form1.append('chunkId', (chunkId + 1).toString()); + form1.append('shardCount', file._shardCount.toString()); + + axios({ + url: process.env.VUE_APP_BASE_API + "/common/uploadChunk", + method: 'post', + data: form1, + headers: { + 'Authorization': 'Bearer ' + getToken(), + 'Content-Type': 'multipart/form-data' + }, + }).then(response => { + if (response.status === 200) { + file.uploadedNum++; + // const percent = Math.floor((file.uploadedNum / file._shardCount) * 100); + // this.percentageSend(file, percent); + if (chunkId + 1 < file._shardCount) { + // 继续上传下一片 + uploadChunk(chunkId + 1); + } else { + // 所有分片上传完成，合并文件 + this.mergeFileFolder(file).then(() => resolve()).catch(error => reject(error)); + } + } else { + reject(new Error('分片上传失败')); + } + }).catch(error => { + reject(error); + }); + }; + + // 从第0块开始上传 + uploadChunk(0); + }); + }, + + // 合并文件 + mergeFileFolder(file) { + let self = this + return new Promise((resolve, reject) => { + const form2 = new FormData(); + form2.append('uploadId', file.uploadId); + form2.append('fileName', file.name); + + axios({ + url: process.env.VUE_APP_BASE_API + "/common/mergeFile", + method: 'post', + data: form2, + headers: { + 'Authorization': 'Bearer ' + getToken(), + 'Content-Type': 'multipart/form-data' + }, + }).then(res => { + if (res.status === 200) { + self.handleResult(res,file); + resolve(); // 合并成功 + } else { + reject(new Error('文件合并失败')); + } + }).catch(error => { + reject(error); + }); + }); + } } }; diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index 6a35b7f..df028f6 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -97,9 +97,9 @@ export default { }) }).catch(() => {}); }, - // 跳转到购物车 + // 跳转到消息中心 toMyCartPage() { - this.$router.push({ path: '/message' }) + this.$router.push({ path: '/message', query: {'states':'1'} }) }, } } diff --git a/src/views/document/detail.vue b/src/views/document/detail.vue index 0a44b54..fe72b94 100644 --- a/src/views/document/detail.vue +++ b/src/views/document/detail.vue @@ -18,7 +18,7 @@ - + @@ -480,7 +480,6 @@ this.isPreviewDisable = true this.previewLoading = true this.$nextTick(() => { - console.info("this.$refs.previewForm====999999=======", this.$refs.previewForm) this.$refs.previewForm.frontModulePreview(row) }) }, diff --git a/src/views/document/downloadFileDetail.vue b/src/views/document/downloadFileDetail.vue index f3cd28a..74a57b9 100644 --- a/src/views/document/downloadFileDetail.vue +++ b/src/views/document/downloadFileDetail.vue @@ -2,7 +2,7 @@
- + diff --git a/src/views/document/editDocument.vue b/src/views/document/editDocument.vue index cfcdb44..2451cfd 100644 --- a/src/views/document/editDocument.vue +++ b/src/views/document/editDocument.vue @@ -128,7 +128,7 @@
关联附件
-
+