debug post request.

templates/repo/datasets/dataset.tmpl

@@ -2,7 +2,20 @@
   <div class="field required dataset-files">
     <label>{{.i18n.Tr "dataset.file"}}</label>
     <div class="files"></div>
-    <div class="ui dropzone" id="dataset" data-upload-url="{{AppSubUrl}}/attachments" data-accepts="{{.AttachmentAllowedTypes}}" data-remove-url="{{AppSubUrl}}/attachments/delete" data-csrf="{{.CsrfToken}}" dataset-id={{.dataset.ID}} data-max-file="100"  data-dataset-id="{{.dataset.ID}}" data-max-size="{{.AttachmentMaxSize}}" data-default-message="{{.i18n.Tr "dropzone.default_message"}}" data-invalid-input-type="{{.i18n.Tr "dropzone.invalid_input_type"}}" data-file-too-big="{{.i18n.Tr "dropzone.file_too_big"}}" data-remove-file="{{.i18n.Tr "dropzone.remove_file"}}">
+    <div class="ui dropzone" 
+    id="dataset" 
+    data-upload-url="{{AppSubUrl}}/attachments" 
+    data-accepts="{{.AttachmentAllowedTypes}}" 
+    data-remove-url="{{AppSubUrl}}/attachments/delete" 
+    data-csrf="{{.CsrfToken}}" 
+    dataset-id={{.dataset.ID}} 
+    data-max-file="100"  
+    data-dataset-id="{{.dataset.ID}}" 
+    data-max-size="{{.AttachmentMaxSize}}" 
+    data-default-message="{{.i18n.Tr "dropzone.default_message"}}" 
+    data-invalid-input-type="{{.i18n.Tr "dropzone.invalid_input_type"}}" 
+    data-file-too-big="{{.i18n.Tr "dropzone.file_too_big"}}" 
+    data-remove-file="{{.i18n.Tr "dropzone.remove_file"}}">
     </div>
   </div>
 </div>

templates/repo/datasets/index.tmpl

@@ -92,7 +92,6 @@
               data-invalid-input-type="{{.i18n.Tr "dropzone.invalid_input_type"}}"
               data-file-too-big="{{.i18n.Tr "dropzone.file_too_big"}}"
               data-remove-file="{{.i18n.Tr "dropzone.remove_file"}}"
-
               data-file-status='{{.i18n.Tr "dropzone.file_status"}}'
               data-file-init-status='{{.i18n.Tr "dropzone.file_init_status"}}'
               data-waitting-uploading='{{.i18n.Tr "dropzone.waitting_uploading"}}'
@@ -129,4 +128,4 @@
 	</div>
 	{{template "base/delete_modal_actions" .}}
 </div>
-{{template "base/footer" .}}
+{{template "base/footer" .}}

web_src/js/components/MinioUploader.vue

@@ -80,13 +80,7 @@ export default {
       previewTemplate,
     });
 
-    // 文件发送前调用
-    // dropzoneUploader.on('sending', (file, xhr, formData) => {
-    //   console.log(xhr)
-    //   console.log(formData)
-    // });
-
-    // 文件复制后触发
+    // 将文件加入文件列表
     dropzoneUploader.on('addedfile', (file) => {
       if(file.status == 'added'){
         this.onFileAdded(file)
@@ -97,9 +91,9 @@ export default {
       this.emitDropzoneSuccess(file)
     });
 
-    // dropzoneUploader.on('totaluploadprogress', function(file, progress){
-    //   this.updateProgress(file, progress)
-    // });
+    dropzoneUploader.on('totaluploadprogress', function(file, progress){
+      this.updateProgress(file, progress)
+    });
 
     dropzoneUploader.on('maxfilesexceeded', function (file) {
       if (this.files[0].status !== 'success') {
@@ -120,8 +114,8 @@ export default {
       this.status = '';
     },
     updateProgress(file, progress) {
-      file.previewTemplate.querySelector(
-        '.dz-upload'
+     file.previewTemplate.querySelector(
+      '.dz-upload'
       ).style.width = `${progress}%`;
     },
     emitDropzoneSuccess(file) {
@@ -138,16 +132,12 @@ export default {
     },
 
     onFileAdded(file) {
-      // file.datasetId = document
-      //   .getElementById('datasetId')
-      //   .getAttribute('datasetId');
       this.resetStatus();
       this.status = this.dropzoneParams.data('obs-connecting');
-      console.log(this.dropzoneParams)
-      console.log(this.status)
-      this.do_uploader(file) 
+      this.do_multi_uploader(file) 
     },
 
+    // 获取key
     get_result(){
       var res
       $.ajax({
@@ -161,6 +151,7 @@ export default {
       return res
     },  
 
+    // 构建ObsClient
     getObsClient(){
       return new ObsClient({
         access_key_id: 'FDP3LRMHLB9S77VWEHE3',       
@@ -169,102 +160,117 @@ export default {
       });
     },
 
-    do_uploader(file){
-      // 创建ObsClient实例
-      let obsClient = this.getObsClient()
+    // 断点续传
+    do_multi_uploader(file){
+      console.log("file = ", file)
+      const result = this.get_result()
+      const _this = this
+      const upload_datasetId = document
+        .getElementById('datasetId')
+        .getAttribute('datasetId');
+      const obsClient = this.getObsClient()
       var cp;
       var hook;
 
-      console.log(obsClient)
       obsClient.uploadFile({
         Bucket : 'testopendata',
-        Key : this.get_result().key,
+        Key : result.key,
         SourceFile : file,
         PartSize : 64 * 1024 * 1024,
-        // ProgressCallback : function(transferredAmount, totalAmount, totalSeconds){
-        //   console.log(transferredAmount * 1.0 / totalSeconds / 1024);
-        //   console.log(transferredAmount * 100.0 / totalAmount);
-        //   if(hook && (transferredAmount / totalAmount) > 0.5){
-        //       // 暂停断点续传任务
-        //     hook.cancel();
-        //   }
-        // },
+
+        // 更新进度条
+        ProgressCallback : function(transferredAmount, totalAmount, totalSeconds){
+          _this.updateProgress(file, ((transferredAmount / totalAmount) * 100).toFixed(2))
+          _this.status = `${_this.dropzoneParams.data('uploading')} ${(
+            (transferredAmount / totalAmount) *
+            100
+          ).toFixed(2)}%`;
+        },
+
+        // 监听文件上传结果
         EventCallback : function(eventType, eventParam, eventResult){
-            // 处理事件响应
-          console.log("1", eventType)
-          console.log("2",eventParam)
-          console.log("3",eventResult)
+
+          // 文件上传成功
+          if(eventType == 'completeMultipartUploadSucceed'){
+            $.ajax({
+              url: '/attachments/add',
+              type: 'POST',
+              data: {
+                'uuid': result.uuid,
+                'file_name': file.name,
+                'size': file.size,
+                'dataset_id': upload_datasetId,
+                '_csrf': csrf,
+                'type': 1
+              },
+              async: false,
+              success: function (data) {
+                _this.progress = 100;
+                _this.status = this.dropzoneParams.data('upload-complete');
+                _this.emitDropzoneSuccess(file)
+              },
+              error: function(){
+                console.log("发送/attachments/add的post错误1")
+                _this.emitDropzoneFailed(file)
+              }
+            });
+            
+          }
         },
-        // ResumeCallback : function(resumeHook, uploadCheckpoint){
-        //   // 获取取消断点续传上传任务控制参数
-        //   hook = resumeHook;
-        //   // 记录断点
-        //   cp = uploadCheckpoint;
-        // }
-      }, function(err, result){
-          
+        ResumeCallback : function(resumeHook, uploadCheckpoint){
+          hook = resumeHook;
+          cp = uploadCheckpoint;
+        }
+      }, function(err, result){     
           // 出现错误，再次调用断点续传接口，继续上传任务
           if(err){
-            console.error('Error-->' + err);
-          //   obsClient.uploadFile({
-          //       UploadCheckpoint : cp,
-          //       ProgressCallback : function(transferredAmount, totalAmount, totalSeconds){
-          //           console.log(transferredAmount * 1.0 / totalSeconds / 1024);
-          //           console.log(transferredAmount * 100.0 / totalAmount);
-          // //       },
-          //       EventCallback : function(eventType, eventParam, eventResult){
-          //         // 处理事件响应
-          //         console.log(eventType)
-          //         console.log(eventParam)
-          //         console.log(eventResult)
-          //       },
-          //     }, function(err, result){
-          //       if(err){
-          //           console.error('Error-->' + err);
-          //       }else{
-          //           if(result.CommonMsg.Status < 300){
-          //             console.log('RequestId-->' + result.InterfaceResult.RequestId);
-          //             console.log('Bucket-->' + result.InterfaceResult.Bucket);
-          //             console.log('Key-->' + result.InterfaceResult.Key);
-          //             console.log('Location-->' + result.InterfaceResult.Location);
-          //           }else{
-          //             console.log('Code-->' + result.CommonMsg.Code);
-          //             console.log('Message-->' + result.CommonMsg.Message);
-          //           }
-          //     }
-          //   });
-          }else {
-              console.log('Status-->' + result.CommonMsg.Status);
-              if (result.CommonMsg.Status < 300 && result.InterfaceResult) {
-                      console.log('RequestId-->' + result.InterfaceResult.RequestId);
+            obsClient.uploadFile({
+              UploadCheckpoint : cp,
+
+              // 断点续传后继续更新进度条
+              ProgressCallback : function(transferredAmount, totalAmount, totalSeconds){
+                _this.updateProgress(file, ((transferredAmount / totalAmount) * 100).toFixed(2))
+                _this.status = `${_this.dropzoneParams.data('uploading')} ${(
+                  (transferredAmount / totalAmount) *
+                  100
+                ).toFixed(2)}%`;
+              },
+
+              // 监听断点续传的结果
+              EventCallback : function(eventType, eventParam, eventResult){
+                // 文件断点续传成功
+                if(eventType == 'completeMultipartUploadSucceed'){
+                  $.ajax({
+                    url: '/attachments/add',
+                    type: 'POST',
+                    data: {
+                      'uuid': result.uuid,
+                      'file_name': file.name,
+                      'size': file.size,
+                      'dataset_id': upload_datasetId,
+                      '_csrf': csrf,
+                      'type': 1
+                    },
+                    async: false,
+                    success: function (data) {
+                      _this.progress = 100;
+                      _this.status = this.dropzoneParams.data('upload-complete');
+                      _this.emitDropzoneSuccess(file)
+                    },
+                    error: function(){
+                      _this.emitDropzoneFailed(file)
+                      console.log("发送/attachments/add的post错误2")
+                    }
+                  });
+                }else if (eventType == 'uploadPartFailed'){
+                  _this.emitDropzoneFailed(file)
+                  console.log("经过断点上传之后还是不能上传成功，该分段上传失败")
+                }
               }
+            });   
           }
       });
     },
-
-
-    finishUpload(file) {
-      // $.ajax({
-      //   url: '/attachments/add',
-      //   type: 'POST',
-      //   data: {
-      //     'uuid': get_result().uuid,
-      //     'file_name': filepath.split('/')[-1],
-      //     'size': file.size,
-      //     'dataset_id': file.datasetId,
-      //     '_csrf': csrf,
-      //     'type': 1
-      //   },
-      //   async: false,
-      //   success: function (data) {
-      //     console.log(data)
-      //   }
-      // })
-      setTimeout(() => {
-        window.location.reload();
-      }, 1000);
-    }
-
   }
 };
 </script>