From 9b887d746406604d5cff4932681e5da6e15efca8 Mon Sep 17 00:00:00 2001
From: zhoupzh <zhoupzh@pcl.ac.cn>
Date: Wed, 27 Apr 2022 15:27:00 +0800
Subject: [PATCH] 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 @@
                       </el-form-item>
                       <el-form-item label='{{$.i18n.Tr "dataset.data_upload"}}:' prop="category">
                             <minio-uploader :uploadtype="type" :desc="desc"></minio-uploader>
-                      </el-form-item>
-                                        
+                      </el-form-item>        
                         <div style='display:none;'
                         id="minioUploader-params"
                         data-uuid="{{.uuid}}"
diff --git a/web_src/js/components/MinioUploader.vue b/web_src/js/components/MinioUploader.vue
index c0f029289..0ff2f097d 100755
--- a/web_src/js/components/MinioUploader.vue
+++ b/web_src/js/components/MinioUploader.vue
@@ -1,9 +1,5 @@
 <template>
   <div class="dropzone-wrapper dataset-files">
-    <!-- <div
-      id="dataset"
-      class="dropzone"
-    /> -->
     <div id="dataset" class="dropzone">
         <div class="maxfilesize ui red message" style="display: none;margin: 2.5rem;"></div>
     </div>
@@ -11,12 +7,26 @@
       {{ file_status_text }}
       <strong class="success text red">{{ status }}</strong>
     </p> -->
-    <el-button style="background-color: #21ba45;" type="success" :disabled="btnFlag" @click="startUpload">{{upload}}</el-button>
+    <el-button style="background-color: #21ba45;margin-top: 2rem;" type="success" :disabled="btnFlag" @click="startUpload">{{upload}}</el-button>
     <el-button type="info" @click="cancelDataset">{{cancel}}</el-button>
-    <div v-for="item in allUploadFiles" style="display:flex;" >
-      <span style="flex:1">{{item.name}}</span>
-      <span style="flex:1">{{item.status}}</span>
+    <div style="margin-top: 2rem;position: relative;">
+      <label class="el-form-item__label" style="width: 140px;position: absolute;left: -140px;">上传状态:</label>
+      <div v-for="item in allUploadFiles" style="display:flex;padding: 0.8rem 0;border-bottom: 1px solid #e8e8e8;line-height: 1;" >
+          <span style="flex:4 1 0%;display: flex;"><i :class="[item.status===0?'ri-checkbox-circle-line success':'ri-close-circle-line failed']" style="margin-right: 0.5rem;"></i>{{item.name}}</span>
+          
+            <span style="flex:1" v-if="item.status===0"><span style="color: #21ba45;">上传成功</span></span>
+          
+          <span style="flex:1" v-else-if="item.status===1">
+            <el-tooltip class="item" effect="dark" placement="top">
+              <div slot="content">{{item.info}}</div>
+              <span style="color: red;cursor: pointer;">上传失败<span>(重复上传)</span></span>
+            </el-tooltip>
+          </span>
+          <span style="flex:1" v-else><span style="color: red;">上传失败</span></span>
+    
+        </div>
     </div>
+    
     <!-- <p>说明：<br>
       - 只有zip格式的数据集才能发起云脑任务；<br>
       - 云脑1提供 <span class="text blue">CPU / GPU</span> 资源，云脑2提供 <span class="text blue">Ascend NPU</span> 资源；调试使用的数据集也需要上传到对应的环境。</p> -->
@@ -24,9 +34,6 @@
 </template>
 
 <script>
-/* eslint-disable eqeqeq */
-// import Dropzone from 'dropzone/dist/dropzone.js';
-// import 'dropzone/dist/dropzone.css'
 import SparkMD5 from 'spark-md5';
 import axios from 'axios';
 import qs from 'qs';
@@ -77,46 +84,7 @@ export default {
     this.repoPath = this.dropzoneParams.data('repopath');
     this.cancel = this.dropzoneParams.data('cancel');
     this.upload = this.dropzoneParams.data('upload');
-    // let previewTemplate = '';
-    // previewTemplate += '<div class="dz-preview dz-file-preview">\n ';
-    // previewTemplate += '    <div class="dz-details">\n ';
-    // previewTemplate += '        <div class="dz-filename">';
-    // previewTemplate +=
-    //   '            <span data-dz-name data-dz-thumbnail></span>';
-    // previewTemplate += '        </div>\n    ';
-    // previewTemplate += '        <div class="dz-size" data-dz-size style="white-space: nowrap"></div>\n  ';
-    // previewTemplate += '    </div>\n  ';
-    // previewTemplate += '    <div class="dz-progress ui active progress">';
-    // previewTemplate +=
-    //   '        <div class="dz-upload bar" data-dz-uploadprogress><div class="progress"></div></div>\n  ';
-    // previewTemplate += '    </div>\n  ';
-    // previewTemplate += '    <div class="dz-success-mark">';
-    // previewTemplate += '        <span>上传成功</span>';
-    // previewTemplate += '    </div>\n  ';
-    // previewTemplate += '    <div class="dz-error-mark">';
-    // previewTemplate += '        <span>上传失败</span>';
-    // previewTemplate += '    </div>\n  ';
-    // previewTemplate += '    <div class="dz-error-message">';
-    // previewTemplate += '        <span data-dz-errormessage></span>';
-    // previewTemplate += '    </div>\n';
-    // previewTemplate += '</div>';
-    let previewTemplate = ''
-    previewTemplate += '<div class="dz-preview dz-file-preview" style="width:100%;background: none;">'
-    previewTemplate += '<div class="dz-details" style="opacity: 1;">'
-    previewTemplate += '<div class="dz-filename"><span data-dz-name></span></div>'
-    previewTemplate += '<div class="dz-size" data-dz-size></div>'
-    previewTemplate += '<div class="dz-progress ui active progress" style="top: 75%;width: 80%;left: 15%;"><div class="dz-upload bar" data-dz-uploadprogress><div class="progress"></div></div></div>'
-    // previewTemplate += '<img data-dz-thumbnail />'
-    previewTemplate += '</div>'
-    
-    previewTemplate += '<div class="dz-success-mark"><span>✔</span></div>'
-    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 = `
+    let previewTemplate = `
         <div class="dz-preview dz-file-preview"> 
           <div class="dz-image"> 
             <img data-dz-thumbnail /> 
@@ -135,7 +103,7 @@ export default {
     const dropzoneUploader = await createDropzone($dropzone[0], {
       url: '/todouploader',
       maxFiles: this.maxFiles,
-      maxFilesize: 100,
+      maxFilesize: 1024*10,
       filesizeBase:1024,
       parallelUploads: this.maxFiles,
       timeout: 0,
@@ -146,11 +114,9 @@ export default {
       dictInvalidFileType: this.dropzoneParams.data('invalid-input-type'),
       dictFileTooBig: this.dropzoneParams.data('file-too-big'),
       dictRemoveFile: this.dropzoneParams.data('remove-file'),
-      previewTemplate:previewTemplate1
+      previewTemplate:previewTemplate
     });
     dropzoneUploader.on('addedfile', (file) => {
-      console.log(file)
-      console.log("dropzoneUploader",dropzoneUploader)
       if(file.size/(1024*1024)>dropzoneUploader.options.maxFilesize){
         dropzoneUploader.removeFile(file)
         $('.maxfilesize.ui.red.message').text("单次最多上传10个文件，单个文件不超过200G")
@@ -195,46 +161,26 @@ export default {
   },
   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]);
-
-      // }
-      // if (myDropzone.getAcceptedFiles().length !== 0) {
-      //       myDropzone.processQueue();
-      //   }
+      this.resetStatus()
       $('.dz-remove').remove()
       $('.maxfilesize.ui.red.message').css('display','none')
       this.btnFlag = true
-        this.uploadFiles = this.dropzoneUploader.getQueuedFiles()
-        console.log(this.uploadFiles,this.uploadFiles.length)
-        
-        // 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)
-        });
+      this.uploadFiles = this.dropzoneUploader.getQueuedFiles()
+      this.uploadFiles.forEach(element => {
+        element.datasetId = document.getElementById('datasetId').getAttribute('datasetId')
+        this.computeMD5(element)
+      });
     },
     cancelDataset(){
       location.href = this.repoPath
       this.dropzoneUploader.removeAllFiles(true)
     },
     resetStatus() {
-      this.progress = 0;
-      this.status = '';
+      this.uploadLength = 0
+      this.allUploadLength = 0
+      this.allUploadFiles = []
     },
     updateProgress(file, progress) {
-      console.log("progress---",progress)
       file.previewTemplate.querySelector(
         '.dz-upload'
       ).style.width = `${progress}%`
@@ -243,7 +189,6 @@ export default {
       ).style.background = '#409eff';
     },
     uploadError(file,info){
-      console.log("uploadError file",file,info)
       file.previewTemplate.querySelector(
         '.dz-error-mark'
       ).style.opacity = 1
@@ -274,30 +219,14 @@ export default {
       this.dropzoneUploader.emit('error', file);
       // this.dropzoneUploader.emit('complete', file);
     },
-    onFileAdded() {
-      this.btnFlag = true
-      this.file.datasetId = document
-        .getElementById('datasetId')
-        .getAttribute('datasetId');
-      this.resetStatus();
-      if(!this.file?.upload){
-        this.btnFlag = false
-        return 
-      }
-      this.computeMD5(this.file);
-    },
-
     finishUpload(file) {
-      // 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
+      console.log()
       if(this.uploadLength === this.uploadFiles.length){
         setTimeout(() => {
         window.location.href = this.repoPath
@@ -307,7 +236,6 @@ export default {
 
     computeMD5(file) {
       console.log("computeMD5-file:",file)
-      this.resetStatus();
       const blobSlice =
           File.prototype.slice ||
           File.prototype.mozSlice ||
@@ -386,6 +314,10 @@ export default {
             this.multipartUpload(file);
           } else {
           // 失败如何处理
+          let info = "上传失败"
+          this.allUploadLength++
+          this.uploadError(file,info)
+          this.allUploadFiles.push({name:file.name,status:2,info:info})
             return;
           }
           return;
@@ -401,9 +333,9 @@ export default {
           //不同数据集上传同一个文件
           if (file.datasetID != '') {
             if (file.datasetName != "" && file.realName != "") {
-              var info = "该文件已上传，对应数据集（" + file.datasetName + "）-文件（" + file.realName + ")";
-              console.log(info);
+              // var info = "该文件已上传，对应数据集（" + file.datasetName + "）-文件（" + file.realName + ")";
               // window.location.reload();
+              let info = `该文件已上传在数据集: ${file.datasetName}`
               this.uploadError(file,info)
               this.allUploadLength++
               this.allUploadFiles.push({name:file.name,status:1,info:info})
@@ -620,7 +552,12 @@ export default {
       this.status = this.dropzoneParams.data('uploading');
       loadNext();
       fileReader.onload = async (e) => {
-        await uploadChunk(e);
+        try{
+          await uploadChunk(e);
+        }catch(err){
+          console.log(err)
+        }
+        
         fileReader.abort();
         currentChunk++;
         if (currentChunk < chunks) {
@@ -636,7 +573,20 @@ export default {
           ).toFixed(2)}%`;
           await loadNext();
         } else {
-          await completeUpload();
+          try{
+            await completeUpload();
+          }catch(err){
+            let info = "上传失败"
+            this.allUploadLength++
+            this.uploadError(file,info)
+            this.allUploadFiles.push({name:file.name,status:2,info:info})
+            console.log("err",err)
+            if(err){
+              return
+            }
+          }
+          
+          
           console.log(
             `文件上传完成：${file.name} \n分片：${chunks} 大小:${
               file.size
@@ -644,7 +594,7 @@ export default {
           );
           this.uploadLength++
           this.allUploadLength++
-          this.allUploadFiles.push({name:file.name,status:0,info:''})
+          this.allUploadFiles.push({name:file.name,status:0,info:'上传成功'})
           this.updateProgress(file, 100);
           this.progress = 100;
           this.status = this.dropzoneParams.data('upload-complete');
@@ -680,4 +630,10 @@ export default {
   margin-top: 1em;
   margin-bottom: 3em;
 }
+.success{
+  color: #21ba45;
+}
+.failed{
+  color: red;
+}
 </style>
\ No newline at end of file