fix issue

web_src/js/components/MinioUploader.vue

@@ -1,9 +1,12 @@
 <template>
   <div class="dropzone-wrapper dataset-files">
-    <div
+    <!-- <div
       id="dataset"
       class="dropzone"
-    />
+    /> -->
+    <div id="dataset" class="dropzone">
+        <div class="maxfilesize ui red message" style="display: none;margin: 2.5rem;"></div>
+    </div>
     <p class="upload-info">
       {{ file_status_text }}
       <strong class="success text red">{{ status }}</strong>
@@ -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 += '<div class="dz-error-mark"><span>✘</span></div>'
     previewTemplate += '<div class="dz-error-message"><span data-dz-errormessage></span></div>'
     previewTemplate += '</div>'
+    
+    
+
+    let previewTemplate1 = `
+        <div class="dz-preview dz-file-preview"> 
+          <div class="dz-image"> 
+            <img data-dz-thumbnail /> 
+          </div> 
+          <div class="dz-details"> 
+            <div class="dz-size"><span data-dz-size></span></div> 
+            <div class="dz-filename"><span data-dz-name></span></div> 
+          </div> 
 
+          <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div> 
+          <div class="dz-error-message" style="line-height: 1.5;"><span data-dz-errormessage></span></div> 
+          <div class="dz-success-mark"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="54" height="54"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-.997-4L6.76 11.757l1.414-1.414 2.829 2.829 5.656-5.657 1.415 1.414L11.003 16z" fill="rgba(47,204,113,1)"/></svg></div> 
+          <div class="dz-error-mark"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="54" height="54"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm0-9.414l2.828-2.829 1.415 1.415L13.414 12l2.829 2.828-1.415 1.415L12 13.414l-2.828 2.829-1.415-1.415L10.586 12 7.757 9.172l1.415-1.415L12 10.586z" fill="rgba(231,76,60,1)"/></svg></div> 
+        </div> `
     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);

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