debug obsclient

templates/repo/datasets/index.tmpl

@@ -1,32 +1,4 @@
-<script src="./dropzone.js"></script>
 {{template "base/head" .}}
-<style>
-  .dropzone.dz-clickable {
-    cursor: pointer;
-  }
-  .dropzone {
-      border-width: 2px;
-      border-style: dashed;
-      border-color: rgb(0, 135, 247);
-      border-image: initial;
-      border-radius: 5px;
-      background: white;
-  }
-
-  .dropzone {
-      min-height: 150px;
-      border-width: 2px;
-      border-style: solid;
-      border-color: rgba(0, 0, 0, 0.3);
-      border-image: initial;
-      background: white;
-      padding: 54px;
-  }
-
-  .dropzone, .dropzone * {
-      box-sizing: border-box;
-  }
-</style>
 
 <div class="repository release dataset-list view">
   {{template "repo/header" .}}
@@ -106,14 +78,6 @@
         </div>
         <div class="dataset ui middle very relaxed page">
           <div class="column">
-            <!-- 上传数据集 -->
-            
-            <!-- <div class="dropzone dz-clickable" id="test">   
-              <div id="file_upload"></div>        
-            </div> -->
-
-
-            
 
           {{if .Permission.CanWrite $.UnitTypeDatasets}}
             <div style='display:none;'
@@ -171,102 +135,3 @@
 	{{template "base/delete_modal_actions" .}}
 </div>
 {{template "base/footer" .}}
-
-
-
-<script>
-// var myDropzone = new Dropzone("div#test", { url: "/todouploader"});
-// var filepath = document.getElementById('file_upload').value
-
-// myDropzone.options.myAwesomeDropzone = {
-//   paramName: filepath, // The name that will be used to transfer the file
-//   maxFilesize: 1, // MB
-//   accept: function(file, done) {
-//     if (file.name != "justinbieber.jpg") {
-//       done("Naha, you don't.");
-//     }
-//     else { done(); }
-//   }
-// };
-  // 引入obs库
-  // var ObsClient = require('esdk-obs-nodejs');
-
-  // // 创建ObsClient实例
-  // var obsClient = new ObsClient({
-  //   access_key_id: 'FDP3LRMHLB9S77VWEHE3',       
-  //   secret_access_key: 'LyM82Wk80pgjhs2z7AdDcsdpCWhbsJtSzQ7hkESN',       
-  //   server : 'https://112.95.163.82'
-  // });
-
-  // var bucketName = "mybucket"
-
-  // // 创建桶
-  // obsClient.createBucket({
-  //   Bucket : bucketName
-  // }, (err, result) => {
-  //   if(err){
-  //           console.error('Error-->' + err);
-  //   }else{
-  //           console.log('Status-->' + result.CommonMsg.Status);
-  //   }
-  // });
-
-  // var objectKey = get_result().key
-
-  // function get_result(){
-  //   var res
-  //   $.ajax({
-  //     url: '/attachments/get_obs_key',
-  //     type: 'GET',
-  //     async: false,
-  //     success: function(result){
-  //       res = result
-  //     }
-  //   });
-  //   return res
-  // }  
-
-  // var filepath = document.getElementById('file_upload').value
-
-//   obsClient.initiateMultipartUpload({
-//     Bucket : 'mybucket',
-//     Key : objectKey,
-//     UploadFile : filepath,
-//     PartSize : 64 * 1024 * 1024,
-//     EnableCheckpoint : true,
-        // EnableCheckSum, true
-//   }, (err, result) => {
-//     if(err){
-//       console.error('Error-->' + err);
-//     }else{
-//       console.log('RequestId-->' + result.InterfaceResult.RequestId);
-        // console.log('Bucket-->' + result.InterfaceResult.Bucket);
-        // console.log('Key-->' + result.InterfaceResult.Key);
-        // console.log('Location-->' + result.InterfaceResult.Location);
-
-
-
-        // $.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("chenggong ")
-        //   }
-        // })
-
-//     }
-// });
-
-
-
-
-</script>

web_src/js/components/MinioUploader.vue

@@ -4,11 +4,6 @@
       id="dataset"
       class="dropzone"
     />
-      <!-- <form class="dropzone" action="/todouploader">
-        <div class="fallback"> 
-            <input name="file" type="file"/> 
-        </div>
-      </form> -->
 
     <p class="upload-info">
       {{ file_status_text }}
@@ -25,6 +20,8 @@
 import SparkMD5 from 'spark-md5';
 import axios from 'axios';
 import qs from 'qs';
+// import esdk-obs-nodejs from 'esdk-obs-nodejs';
+// import * as ObsClient from 'esdk-obs-nodejs'
 import createDropzone from '../features/dropzone.js';
 
 const {_AppSubUrl, _StaticUrlPrefix, csrf} = window.config;
@@ -72,81 +69,9 @@ export default {
     previewTemplate += '    </div>\n';
     previewTemplate += '</div>';
 
-    // var fileArr = new Array();
-    //     jQuery(function($){
-    //        Dropzone.autoDiscover = true;
-    //        Dropzone.options.myAwesomeDropzone = false;
-    //     try {
-	  //       $(".dropzone").dropzone({
-		//         url:"/todouploader",
-		//         method:"post",
-		//         paramName:"file",
-		//         autoProcessQueue:true,//自动上传
-		//         maxFilesize:1 * 1024 * 1024 * 1024 * 1024, // MB
-	  //           acceptedFiles:"*/*",
-	  //           dictInvalidFileType:"无效的文件类型",
-	  //           addRemoveLinks:true,
-	  //           maxFiles: 1,  //指的是上传目录下的最大文件数
-	  //           // dictRemoveFile:"移除文件",
-	  //           dictDefaultMessage:
-	  //           "<span class='bigger-150 bolder'><i class='icon-caret-right red'></i>拖动文件</span>上传\
-	  //           <span class='smaller-80 gre'>(或者点击上传)</span> <br /> \
-	  //           <i class='upload-icon icon-cloud-upload blue icon-3x'></i>",
-	  //           dictResponseError:"文件上传失败!",
-	  //           dictFileTooBig:"文件过大,上传失败!",
-	  //           previewTemplate: "<div class=\"dz-preview dz-file-preview\">\n  <div class=\"dz-details\">\n    <div class=\"dz-filename\"><span data-dz-name></span></div>\n    <div class=\"dz-size\" data-dz-size></div>\n    <img data-dz-thumbnail />\n  </div>\n  <div class=\"progress progress-small progress-striped active\"><div class=\"progress-bar progress-bar-success\" data-dz-uploadprogress></div></div>\n  <div class=\"dz-success-mark\"><span>上传成功</span></div>\n  <div class=\"dz-error-mark\"><span>上传失败</span></div>\n  <div class=\"dz-error-message\"><span data-dz-errormessage></span></div>\n</div>",
-	  //         	init:function(){
-	  //             	this.on("addedfile",function(file,data) {
-	  //                 	fileArr.push(file.upload.uuid);
-	  //                 	//解决点击时重复发送请求
-	  //                 	$(".dz-remove").each(function(index) {
-	  //                       if(!$(".dz-remove:eq(" + index + ")").attr("id")) {
-	  //                           $(".dz-remove:eq(" + index + ")").attr("id",fileArr[index]);
-	  //                       }
-	  //                  	})   
-	  //            	}),
-
-    //           		this.on("success",function(file,data){
-	  //                 //var myDropzone = this;
-	  //                  	$("#" + file.upload.uuid).click(function() {
-    //                       	var fileName = $(this).parent().find(".dz-filename").text();
-    //                       	console.log(fileName )    
-	  //                 	})   
-	  //             	});
-	              
-	  //             this.on("complete",function(file) {
-    //                   if(file.status == "canceled" || file.status == "error") {
-    //                       var fileName = $("#" + file.upload.uuid).parent().find(".dz-filename").text();
-    //                       // setTimeout(function() {
-    //                       //       $.ajax({
-    //                       //           type:"POST",
-    //                       //           url:"${pageContext.request.contextPath}/uploadController/delete.action",
-    //                       //           data:{"fileName":fileName},
-    //                       //           dataType:"json",
-    //                       //           success:function(data){
-	  //                       //               if(data == "success") {
-	  //                       //                   // alert("删除成功");
-	  //                       //               }
-    //                       //          },
-    //                       //          error:function(ajax) {
-    //                       //              alert(ajax.status);
-    //                       //          }
-    //                       //     }) 
-    //                       // },2000);
-	  //                 }
-	  //             }) 
-	              
-	  //         	}
-	  //       });
-    //   	} catch(e) {
-    //     alert('Dropzone.js does not support older browsers!');
-    //  	}
-		// });
-
-
-
     const $dropzone = $('div#dataset');
     console.log('createDropzone');
+
     const dropzoneUploader = await createDropzone($dropzone[0], {
       url: '/todouploader',
       maxFiles: this.maxFiles,
@@ -157,14 +82,31 @@ export default {
       dictInvalidFileType: this.dropzoneParams.data('invalid-input-type'),
       dictFileTooBig: this.dropzoneParams.data('file-too-big'),
       dictRemoveFile: this.dropzoneParams.data('remove-file'),
-      previewTemplate
+      previewTemplate,
     });
+
+    // 文件发送前调用
+    dropzoneUploader.on('sending', (file, xhr, formData) => {
+      console.log(xhr)
+      console.log(formData)
+    });
+
+    // 文件复制后触发
     dropzoneUploader.on('addedfile', (file) => {
-      setTimeout(() => {
-        // eslint-disable-next-line no-unused-expressions
-        file.accepted && this.onFileAdded(file);
-      }, 200);
+      console.log("file",file)
+      if(file.status == 'added'){
+        this.onFileAdded(file)
+      } 
     });
+
+    dropzoneUploader.on('success', (file, res) => {
+      this.emitDropzoneSuccess(file)
+    });
+
+    dropzoneUploader.on('totaluploadprogress', function(file, progress){
+      this.updateProgress(file, progress)
+    });
+
     dropzoneUploader.on('maxfilesexceeded', function (file) {
       if (this.files[0].status !== 'success') {
         alert(this.dropzoneParams.data('waitting-uploading'));
@@ -188,107 +130,114 @@ export default {
         '.dz-upload'
       ).style.width = `${progress}%`;
     },
+    emitDropzoneSuccess(file) {
+      file.status = 'success';
+      this.dropzoneUploader.emit('success', file);
+      this.dropzoneUploader.emit('complete', file);
+      this.finishUpload(file)
+    },
+    emitDropzoneFailed(file) {
+      this.status = this.dropzoneParams.data('falied');
+      file.status = 'error';
+      this.dropzoneUploader.emit('error', file);
+      // this.dropzoneUploader.emit('complete', file);
+    },
 
     onFileAdded(file) {
-      file.datasetId = document
-        .getElementById('datasetId')
-        .getAttribute('datasetId');
+      // file.datasetId = document
+      //   .getElementById('datasetId')
+      //   .getAttribute('datasetId');
+      console.log("执行到我了")
       this.resetStatus();
-      // this.computeMD5(file);
-    },
+      this.status = this.dropzoneParams.data('obs-connectting');
+      
+      // 引入obs库
+      var ObsClient = require('esdk-obs-nodejs');
 
-    // finishUpload(file) {
-    //   this.emitDropzoneSuccess(file);
-    //   setTimeout(() => {
-    //     window.location.reload();
-    //   }, 1000);
-    // },
+      // 创建ObsClient实例
+      var obsClient = new ObsClient({
+        access_key_id: 'FDP3LRMHLB9S77VWEHE3',       
+        secret_access_key: 'LyM82Wk80pgjhs2z7AdDcsdpCWhbsJtSzQ7hkESN',       
+        server : 'https://112.95.163.82'
+      });  
+      console.log("obsClient", obsClient)
 
-    fileLoaded(e) {
-        this.updateProgress(file, ((currentChunk / chunks) * 100).toFixed(2));
-    },
-
-    // async computeMD5Success(md5edFile) {
-    //   async function addAttachment(file) {
-    //     return await axios.post(
-    //       '/attachments/add',
-    //       qs.stringify({
-    //         uuid: file.uuid,
-    //         file_name: file.name,
-    //         size: file.size,
-    //         dataset_id: file.datasetId,
-    //         _csrf: csrf
-    //       })
-    //     );
-    //   }
-    // },
+      // 创建桶
+      // obsClient.createBucket({
+      //   Bucket : 'bucketname'
+      // }, (err, result) => {
+      //   if(err){
+      //           console.error('Error-->' + err);
+      //           this.emitDropzoneFailed(file)
+      //   }else{
+      //           console.log('Status-->' + result.CommonMsg.Status);
+      //   }
+      // });
 
-
-    async newMultiUpload(file) {
-      const res = await axios.get('/attachments/new_multipart', {
-        params: {
-          totalChunkCounts: file.totalChunkCounts,
-          md5: file.uniqueIdentifier,
-          size: file.size,
-          fileType: file.type,
-          _csrf: csrf
+      obsClient.uploadFile({
+        Bucket : 'bucketname',
+        Key : this.get_result().key,
+        // 设置待上传的本地文件，localfile为待上传的本地文件路径，需要指定到具体的文件名
+        UploadFile : file.name,
+        // 设置分段大小为10MB
+        PartSize : 10 * 1024 * 1024,
+        // 开启断点续传模式
+        EnableCheckpoint : true
+      }, (err, result) => {
+        if(err){
+          console.error('Error-->' + err);
+          this.emitDropzoneFailed(file)
+        }else{
+          console.log('RequestId-->' + result.InterfaceResult.RequestId);
+          console.log('Bucket-->' + result.InterfaceResult.Bucket);
+          console.log('Key-->' + result.InterfaceResult.Key);
+          console.log('Location-->' + result.InterfaceResult.Location);
+          this.emitDropzoneSuccess(file);
         }
       });
-      file.uploadID = res.data.uploadID;
-      file.uuid = res.data.uuid;
     },
 
-    multipartUpload(file) {
-      async function updateChunk(currentChunk) {
-        await axios.post(
-          '/attachments/update_chunk',
-          qs.stringify({
-            uuid: file.uuid,
-            chunkNumber: currentChunk + 1,
-            etag: etags[currentChunk],
-            _csrf: csrf
-          })
-        );
-      }
-
-      async function completeUpload() {
-        return await axios.post(
-          '/attachments/complete_multipart',
-          qs.stringify({
-            uuid: file.uuid,
-            uploadID: file.uploadID,
-            file_name: file.name,
-            size: file.size,
-            dataset_id: file.datasetId,
-            _csrf: csrf
-          })
-        );
-      }
-
-      const successChunks = [];
-      let successParts = [];
-      successParts = file.chunks.split(',');
-      for (let i = 0; i < successParts.length; i++) {
-        successChunks[i] = successParts[i].split('-')[0];
-      }
+    get_result(){
+      var res
+      $.ajax({
+        url: '/attachments/get_obs_key',
+        type: 'GET',
+        async: false,
+        success: function(result){
+          res = result
+        }
+      });
+      console.log("res=", res)
+      return res
+    },  
 
+    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>
 
 <style>
-/* .fallback {
-  border: 1px white solid;
-}
-
-button, input {
-    overflow: visible;
-    width: 100%;
-    height: 15%;
-    opacity: 0;
-} */
-
 .dropzone-wrapper {
   margin: 2em auto;
 }

webpack.config.js

@@ -87,6 +87,9 @@ module.exports = {
       }
     }
   },
+  node: {
+    fs:'empty'
+  },
   module: {
     rules: [
       {