From 260232e417828f0ca6ea784517ed517577a29104 Mon Sep 17 00:00:00 2001 From: zhoupzh Date: Tue, 19 Apr 2022 10:12:24 +0800 Subject: [PATCH 1/8] fix issue --- web_src/js/components/MinioUploader.vue | 23 +++++++++++++++++++---- 1 file changed, 19 insertions(+), 4 deletions(-) diff --git a/web_src/js/components/MinioUploader.vue b/web_src/js/components/MinioUploader.vue index 8c33608e7..d6c21e535 100755 --- a/web_src/js/components/MinioUploader.vue +++ b/web_src/js/components/MinioUploader.vue @@ -8,7 +8,7 @@ {{ file_status_text }} {{ status }}

- {{upload}} + {{upload}} {{cancel}} +
+ +

{{ file_status_text }} {{ status }} @@ -43,7 +46,7 @@ export default { return { dropzoneUploader: null, maxFiles: 10, - maxFilesize: 1 * 1024 * 1024 * 1024 * 1024, + maxFilesize: 200 , acceptedFiles: '*/*', progress: 0, status: '', @@ -54,6 +57,8 @@ export default { btnFlag:false, cancel:'', upload:'', + uploadFiles:[], + uploadFilesAddId:[], }; }, @@ -100,50 +105,104 @@ export default { previewTemplate += '

✘
' previewTemplate += '
' previewTemplate += '' + + + + let previewTemplate1 = ` +
+
+ +
+
+
+
+
+
+
+
+
+
` const $dropzone = $('div#dataset'); const dropzoneUploader = await createDropzone($dropzone[0], { url: '/todouploader', maxFiles: this.maxFiles, - maxFilesize: this.maxFileSize, + maxFilesize: 100, + filesizeBase:1024, parallelUploads: this.maxFiles, timeout: 0, + addRemoveLinks:true, // autoQueue: false, autoProcessQueue: false, //自动上传 dictDefaultMessage: this.dropzoneParams.data('default-message'), dictInvalidFileType: this.dropzoneParams.data('invalid-input-type'), dictFileTooBig: this.dropzoneParams.data('file-too-big'), dictRemoveFile: this.dropzoneParams.data('remove-file'), - // previewTemplate + previewTemplate:previewTemplate1 }); dropzoneUploader.on('addedfile', (file) => { console.log(file) - this.file = file + console.log("dropzoneUploader",dropzoneUploader) + if(file.size/(1024*1024)>dropzoneUploader.options.maxFilesize){ + dropzoneUploader.removeFile(file) + $('.maxfilesize.ui.red.message').text("单次最多上传10个文件，单个文件不超过200G") + $('.maxfilesize.ui.red.message').css('display','block') + + }else{ + this.file = file + $('.maxfilesize.ui.red.message').css('display','none') + + } }); + dropzoneUploader.on("removedfile",(file)=>{ + $('.maxfilesize.ui.red.message').css('display','none') + }) dropzoneUploader.on('maxfilesexceeded', function (file) { - if (this.files[0].status !== 'success') { - alert(this.dropzoneParams.data('waitting-uploading')); - this.removeFile(file); - return; - } - this.removeAllFiles(); - this.addFile(file); + console.log("maxfilesexceeded") + // if (this.files[0].status !== 'success') { + // alert(this.dropzoneParams.data('waitting-uploading')); + // this.removeFile(file); + // return; + // } + dropzoneUploader.removeFile(file) + $('.maxfilesize.ui.red.message').text("单次最多上传10个文件，单个文件不超过200G") + $('.maxfilesize.ui.red.message').css('display','block') + // this.removeAllFiles(); + // this.addFile(file); }); this.dropzoneUploader = dropzoneUploader; + console.log(this.dropzoneUploader) }, methods: { startUpload(){ - console.log(this.dropzoneUploader) - console.log(this.dropzoneUploader.getQueuedFiles()) - for (let i = 0; i < this.dropzoneUploader.getAcceptedFiles().length; i++) { - console.log(i) - this.dropzoneUploader.processFile(myDropzone.getAcceptedFiles()[i]); + // console.log(this.dropzoneUploader) + // console.log(this.dropzoneUploader.getQueuedFiles()) + // for (let i = 0; i < this.dropzoneUploader.getAcceptedFiles().length; i++) { + // console.log(i) + // this.dropzoneUploader.processFile(myDropzone.getAcceptedFiles()[i]); - } - if (myDropzone.getAcceptedFiles().length !== 0) { - myDropzone.processQueue(); - } + // } + // if (myDropzone.getAcceptedFiles().length !== 0) { + // myDropzone.processQueue(); + // } + $('.maxfilesize.ui.red.message').css('display','none') + this.btnFlag = true + this.uploadFiles = this.dropzoneUploader.getQueuedFiles() + console.log(this.uploadFiles) + // this.uploadFilesAddId = this.uploadFiles.map((item)=>{ + // console.log(item) + // return item.datasetId = document + // .getElementById('datasetId') + // .getAttribute('datasetId'); + // }) + // console.log(this.uploadFilesAddId[0],this.uploadFilesAddId[1]) + // this.computeMD5(this.file); + this.uploadFiles.forEach(element => { + element.datasetId = document.getElementById('datasetId').getAttribute('datasetId') + console.log(element) + this.computeMD5(element) + }); }, cancelDataset(){ location.href = this.repoPath @@ -162,6 +221,27 @@ export default { '.dz-upload' ).style.background = '#409eff'; }, + uploadError(file,info){ + console.log("uploadError file",file,info) + file.previewTemplate.querySelector( + '.dz-error-mark' + ).style.opacity = 1 + file.previewTemplate.querySelector( + '.dz-progress' + ).style.opacity = 0 + file.previewTemplate.querySelector( + '.dz-error-message span' + ).innerHTML = info + file.previewTemplate.querySelector( + '.dz-error-message' + ).style.display = 'block' + file.previewTemplate.querySelector( + '.dz-details' + ).onmouseover = function(){file.previewTemplate.querySelector('.dz-error-message').style.opacity = 1 } + file.previewTemplate.querySelector( + '.dz-details' + ).onmouseout = function(){file.previewTemplate.querySelector('.dz-error-message').style.opacity = 0 } + }, emitDropzoneSuccess(file) { file.status = 'success'; this.dropzoneUploader.emit('success', file); @@ -187,13 +267,20 @@ export default { }, finishUpload(file) { - this.emitDropzoneSuccess(file); - setTimeout(() => { - window.location.href = this.repoPath - }, 1000); + // this.emitDropzoneSuccess(file); + // setTimeout(() => { + // window.location.href = this.repoPath + // }, 1000); + file.previewTemplate.querySelector( + '.dz-success-mark' + ).style.opacity = 1 + file.previewTemplate.querySelector( + '.dz-progress' + ).style.opacity = 0 }, computeMD5(file) { + console.log("computeMD5-file:",file) this.resetStatus(); const blobSlice = File.prototype.slice || @@ -203,7 +290,7 @@ export default { spark = new SparkMD5.ArrayBuffer(), fileReader = new FileReader(); let currentChunk = 0; - + console.log("computeMD5-chunks:",chunks) const time = new Date().getTime(); // console.log('计算MD5...') this.status = this.dropzoneParams.data('md5-computing'); @@ -227,6 +314,7 @@ export default { (currentChunk / chunks) * 100 ).toFixed(2)}% (${currentChunk}/${chunks})`; + console.log("this.status",this.status) this.updateProgress(file, ((currentChunk / chunks) * 100).toFixed(2)); loadNext(); return; @@ -238,6 +326,7 @@ export default { file.size } 用时：${(new Date().getTime() - time) / 1000} s` ); + this.updateProgress(file,100) spark.destroy(); // 释放缓存 file.uniqueIdentifier = md5; // 将文件md5赋值给文件唯一标识 file.cmd5 = false; // 取消计算md5状态 @@ -279,14 +368,15 @@ export default { if (file.datasetID != '') { if (file.datasetName != "" && file.realName != "") { var info = "该文件已上传，对应数据集（" + file.datasetName + "）-文件（" + file.realName + ")"; - window.alert(info); - window.location.reload(); + console.log(info); + // window.location.reload(); + this.uploadError(file,info) } } console.log('文件已上传完成'); this.progress = 100; this.status = this.dropzoneParams.data('upload-complete'); - this.finishUpload(file); + // this.finishUpload(file); } else { // 断点续传 this.multipartUpload(file); diff --git a/web_src/js/index.js b/web_src/js/index.js index 6fdd68d8d..e5521405f 100755 --- a/web_src/js/index.js +++ b/web_src/js/index.js @@ -3953,7 +3953,8 @@ function initVueDataset() { }, gotoUpload(repolink,datsetId){ - location.href = `${AppSubUrl}${repolink}/datasets/attachments/upload?datasetId=${datsetId}` + // location.href = `${AppSubUrl}${repolink}/datasets/attachments/upload?datasetId=${datsetId}` + window.open(`${AppSubUrl}${repolink}/datasets/attachments/upload?datasetId=${datsetId}`,'_blank') }, gotoDataset(datsetUrl){ location.href = datsetUrl From ee215a6ad075449abf04a44ba3d39c59ecc5ef2b Mon Sep 17 00:00:00 2001 From: zhoupzh Date: Tue, 26 Apr 2022 18:27:05 +0800 Subject: [PATCH 3/8] fix issue --- web_src/js/components/MinioUploader.vue | 36 ++++++++++++++++++++++++++++++--- 1 file changed, 33 insertions(+), 3 deletions(-) diff --git a/web_src/js/components/MinioUploader.vue b/web_src/js/components/MinioUploader.vue index ce22359de..c0f029289 100755 --- a/web_src/js/components/MinioUploader.vue +++ b/web_src/js/components/MinioUploader.vue @@ -7,12 +7,16 @@
-

+ {{upload}} {{cancel}} +

+ {{item.name}} + {{item.status}} +
@@ -60,6 +64,9 @@ export default { upload:'', uploadFiles:[], uploadFilesAddId:[], + allUploadFiles:[], + uploadLength:0, + allUploadLength:0, }; }, @@ -175,6 +182,17 @@ export default { this.dropzoneUploader = dropzoneUploader; console.log(this.dropzoneUploader) }, + watch:{ + allUploadLength(len){ + console.log(len) + if(len===this.uploadFiles.length){ + setTimeout(() => { + this.dropzoneUploader.removeAllFiles(true) + this.btnFlag = false + }, 2000); + } + } + }, methods: { startUpload(){ // console.log(this.dropzoneUploader) @@ -187,10 +205,12 @@ export default { // if (myDropzone.getAcceptedFiles().length !== 0) { // myDropzone.processQueue(); // } + $('.dz-remove').remove() $('.maxfilesize.ui.red.message').css('display','none') this.btnFlag = true this.uploadFiles = this.dropzoneUploader.getQueuedFiles() - console.log(this.uploadFiles) + console.log(this.uploadFiles,this.uploadFiles.length) + // this.uploadFilesAddId = this.uploadFiles.map((item)=>{ // console.log(item) // return item.datasetId = document @@ -278,6 +298,11 @@ export default { file.previewTemplate.querySelector( '.dz-progress' ).style.opacity = 0 + if(this.uploadLength === this.uploadFiles.length){ + setTimeout(() => { + window.location.href = this.repoPath + }, 1000); + } }, computeMD5(file) { @@ -380,6 +405,8 @@ export default { console.log(info); // window.location.reload(); this.uploadError(file,info) + this.allUploadLength++ + this.allUploadFiles.push({name:file.name,status:1,info:info}) } } console.log('文件已上传完成'); @@ -615,6 +642,9 @@ export default { file.size } 用时：${(new Date().getTime() - time) / 1000} s` ); + this.uploadLength++ + this.allUploadLength++ + this.allUploadFiles.push({name:file.name,status:0,info:''}) this.updateProgress(file, 100); this.progress = 100; this.status = this.dropzoneParams.data('upload-complete'); From 9b887d746406604d5cff4932681e5da6e15efca8 Mon Sep 17 00:00:00 2001 From: zhoupzh Date: Wed, 27 Apr 2022 15:27:00 +0800 Subject: [PATCH 4/8] fix issue --- templates/repo/attachment/upload.tmpl | 3 +- web_src/js/components/MinioUploader.vue | 172 ++++++++++++-------------------- 2 files changed, 65 insertions(+), 110 deletions(-) diff --git a/templates/repo/attachment/upload.tmpl b/templates/repo/attachment/upload.tmpl index 42aac99df..7700484e8 100644 --- a/templates/repo/attachment/upload.tmpl +++ b/templates/repo/attachment/upload.tmpl @@ -22,8 +22,7 @@ - - +