From 7c57ccdbef76ef8882a9efe07d25881048c202f9 Mon Sep 17 00:00:00 2001
From: Gitea <gitea@fake.local>
Date: Sat, 6 Feb 2021 17:00:29 +0800
Subject: [PATCH] add obs uploader.

---
 options/locale/locale_zh-CN.ini         |   3 +
 templates/repo/datasets/index.tmpl      |  20 +-
 templates/repo/header.tmpl              |  35 +-
 web_src/js/components/MinioUploader.vue | 459 ++++++++++++++++--------
 web_src/js/components/ObsUploader.vue   | 298 +++++++++++++++
 web_src/js/index.js                     |  17 +
 6 files changed, 667 insertions(+), 165 deletions(-)
 create mode 100755 web_src/js/components/ObsUploader.vue

diff --git a/options/locale/locale_zh-CN.ini b/options/locale/locale_zh-CN.ini
index 4d6295370..fec135a7f 100755
--- a/options/locale/locale_zh-CN.ini
+++ b/options/locale/locale_zh-CN.ini
@@ -758,6 +758,9 @@ balance.total_view=余额总览
 balance.available=可用余额：
 cloudbrain1=云脑1
 cloudbrain2=云脑2
+cloudbrain_selection=云脑选择
+cloudbrain_platform_selection=选择您准备使用的云脑平台：
+confirm_choice=确定
 
 template.items=模板选项
 template.git_content=Git数据(默认分支)
diff --git a/templates/repo/datasets/index.tmpl b/templates/repo/datasets/index.tmpl
index e7fc7516c..dc3b82e4e 100755
--- a/templates/repo/datasets/index.tmpl
+++ b/templates/repo/datasets/index.tmpl
@@ -1,6 +1,18 @@
 {{template "base/head" .}}
 <div class="repository release dataset-list view">
-	{{template "repo/header" .}}
+  {{template "repo/header" .}}
+  <script>
+    $(document).ready(function() {
+      url = window.location.href
+      type = url.split('?type=')[1]
+      console.log(type)
+      if (type == 0){
+        $('.contorl_component').attr("id", 'minioUploader')
+      }else{
+        $('.contorl_component').attr("id", 'obsUploader')
+      }
+    });
+  </script>
 	<form class="ui container" action="{{.Link}}" method="post">
     <input name="id" value="{{.dataset.ID}}" type="hidden" />
     <!--
@@ -103,11 +115,7 @@
               data-failed='{{.i18n.Tr "dropzone.failed"}}'
             >
             </div>
-            {{if eq .StoreType "minio"}}
-            <div id="minioUploader"></div>
-            {{else}}
-              <div style="margin: 2em 0;"> {{.i18n.Tr "dropzone.enable_minio_support"}} </div>
-            {{end}}
+            <div class="contorl_component"></div>
           {{end}}
           </div>
         </div>
diff --git a/templates/repo/header.tmpl b/templates/repo/header.tmpl
index ac4776a2c..2fee63fe6 100755
--- a/templates/repo/header.tmpl
+++ b/templates/repo/header.tmpl
@@ -103,8 +103,9 @@
 				{{end}}
 
 				{{if .Permission.CanRead $.UnitTypeDatasets}}
-				<a class="{{if .PageIsDataset}}active{{end}} item" href="{{.RepoLink}}/datasets">
+				<a class="{{if .PageIsDataset}}active{{end}} item dataset" >
 					{{svg "octicon-inbox" 16}} {{.i18n.Tr "datasets"}}
+					<span style="display:none" class="dataset_link">{{.RepoLink}}</span>
 				</a>
 				{{end}}
 
@@ -173,28 +174,28 @@
 
 <div class="ui select_cloudbrain modal">
   <div class="header">
-    云脑选择
+    {{$.i18n.Tr "repo.cloudbrain_selection"}}
   </div>
   <div class="content">
     <div class="ui form" method="post">
 			<div class="grouped fields">
-				<label for="CloudBrain">选择您准备使用的云脑平台：</label>
+				<label for="CloudBrain">{{$.i18n.Tr "repo.cloudbrain_platform_selection"}}</label>
 				<div class="field">
 					<div class="ui radio checkbox">
 						<input type="radio" name="CloudBrain" checked tabindex="0" class="hidden" value="0">
-						<label>云脑1</label>
+						<label>{{$.i18n.Tr "repo.cloudbrain1"}}</label>
 					</div>
 				</div>
 				<div class="field">
 					<div class="ui radio checkbox">
 						<input type="radio" name="CloudBrain" tabindex="0" class="hidden" value="1">
-						<label>云脑2</label>
+						<label>{{$.i18n.Tr "repo.cloudbrain2"}}</label>
 					</div>
 				</div>
 			</div>
 			<div class="actions">
 				<div class="ui positive right labeled icon button">
-					确定
+					{{$.i18n.Tr "repo.confirm_choice"}}
 					<i class="checkmark icon"></i>
 				</div>
 			</div>
@@ -205,6 +206,7 @@
 </div>
 <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
 <script>
+	// 点击云脑进行选择云脑平台并进入相应的界面
 	$('.item.cloudbrain').click(function(){
 		$('.ui.select_cloudbrain.modal')
 			.modal('closable', false)
@@ -216,16 +218,33 @@
 		$(".ui.positive.right.icon.button").click(function(){
 			// 声明一个变量来接收以及获取单选框选择的情况
 			var checked_radio = $("input[type='radio']:checked").val()
-			console.log(checked_radio)
+
 			if(checked_radio=='0'){
 				window.location.href = repolink+'/cloudbrain'
 			}else if(checked_radio=='1'){
 				window.location.href = repolink+'/modelarts'
 			}else{
-
 				return;
 			}
 		})
+	})
+
+	// 点击数据集进行选择云脑平台并进入相应的界面
+	$('.item.dataset').click(function(){
+		$('.ui.select_cloudbrain.modal')
+			.modal('closable', false)
+			.modal('show');
+		$('.ui.radio.checkbox').checkbox();
 
+		var repolink = $(".dataset_link").text()
+		console.log(repolink)
+		$(".ui.positive.right.icon.button").click(function(){
+			// 声明一个变量来接收以及获取单选框选择的情况
+			var checked_radio = $("input[type='radio']:checked").val()
+			$('.ui.select_cloudbrain.modal')
+			.modal('show');	
+			// 向后端传递对象
+			window.location.href = repolink + "/datasets?type=" + checked_radio
+		})
 	})
 </script>
\ No newline at end of file
diff --git a/web_src/js/components/MinioUploader.vue b/web_src/js/components/MinioUploader.vue
index 644b879a5..c453daf16 100755
--- a/web_src/js/components/MinioUploader.vue
+++ b/web_src/js/components/MinioUploader.vue
@@ -4,20 +4,21 @@
       id="dataset"
       class="dropzone"
     />
-
     <p class="upload-info">
       {{ file_status_text }}
       <span class="success">{{ status }}</span>
     </p>
-  </div> 
+  </div>
 </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';
 import createDropzone from '../features/dropzone.js';
-import ObsClient from 'esdk-obs-browserjs';
 
 const {_AppSubUrl, _StaticUrlPrefix, csrf} = window.config;
 
@@ -66,7 +67,6 @@ export default {
 
     const $dropzone = $('div#dataset');
     console.log('createDropzone');
-
     const dropzoneUploader = await createDropzone($dropzone[0], {
       url: '/todouploader',
       maxFiles: this.maxFiles,
@@ -77,24 +77,14 @@ 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('addedfile', (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)
+      setTimeout(() => {
+        // eslint-disable-next-line no-unused-expressions
+        file.accepted && this.onFileAdded(file);
+      }, 200);
     });
-
     dropzoneUploader.on('maxfilesexceeded', function (file) {
       if (this.files[0].status !== 'success') {
         alert(this.dropzoneParams.data('waitting-uploading'));
@@ -107,15 +97,14 @@ export default {
 
     this.dropzoneUploader = dropzoneUploader;
   },
-
   methods: {
     resetStatus() {
       this.progress = 0;
       this.status = '';
     },
     updateProgress(file, progress) {
-     file.previewTemplate.querySelector(
-      '.dz-upload'
+      file.previewTemplate.querySelector(
+        '.dz-upload'
       ).style.width = `${progress}%`;
     },
     emitDropzoneSuccess(file) {
@@ -123,153 +112,321 @@ export default {
       this.dropzoneUploader.emit('success', file);
       this.dropzoneUploader.emit('complete', file);
     },
-    // emitDropzoneFailed(file) {
-    //   this.status = this.dropzoneParams.data('falied');
-    //   file.status = 'error';
-    //   this.dropzoneUploader.emit('error', 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');
+      this.resetStatus();
+      this.computeMD5(file);
+    },
+
+    finishUpload(file) {
+      this.emitDropzoneSuccess(file);
+      setTimeout(() => {
+        window.location.reload();
+      }, 1000);
+    },
+
+    computeMD5(file) {
       this.resetStatus();
-      this.status = this.dropzoneParams.data('obs-connecting');
-      this.do_multi_uploader(file) 
+      const blobSlice =
+          File.prototype.slice ||
+          File.prototype.mozSlice ||
+          File.prototype.webkitSlice,
+        chunkSize = 1024 * 1024 * 64,
+        chunks = Math.ceil(file.size / chunkSize),
+        spark = new SparkMD5.ArrayBuffer(),
+        fileReader = new FileReader();
+      let currentChunk = 0;
+
+      const time = new Date().getTime();
+      // console.log('计算MD5...')
+      this.status = this.dropzoneParams.data('md5-computing');
+      file.totalChunkCounts = chunks;
+      loadNext();
+
+      fileReader.onload = (e) => {
+        fileLoaded.call(this, e);
+      };
+      fileReader.onerror = (err) => {
+        console.warn('oops, something went wrong.', err);
+        file.cancel();
+      };
+
+      function fileLoaded(e) {
+        spark.append(e.target.result); // Append array buffer
+        currentChunk++;
+        if (currentChunk < chunks) {
+          // console.log(`第${currentChunk}分片解析完成, 开始第${currentChunk +1}/${chunks}分片解析`);
+          this.status = `${this.dropzoneParams.data('loading-file')} ${(
+            (currentChunk / chunks) *
+            100
+          ).toFixed(2)}% (${currentChunk}/${chunks})`;
+          this.updateProgress(file, ((currentChunk / chunks) * 100).toFixed(2));
+          loadNext();
+          return;
+        }
+
+        const md5 = spark.end();
+        console.log(
+          `MD5计算完成：${file.name} \nMD5：${md5} \n分片：${chunks} 大小:${
+            file.size
+          } 用时：${(new Date().getTime() - time) / 1000} s`
+        );
+        spark.destroy(); // 释放缓存
+        file.uniqueIdentifier = md5; // 将文件md5赋值给文件唯一标识
+        file.cmd5 = false; // 取消计算md5状态
+        this.computeMD5Success(file);
+      }
+
+      function loadNext() {
+        const start = currentChunk * chunkSize;
+        const end =
+          start + chunkSize >= file.size ? file.size : start + chunkSize;
+        fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
+      }
     },
 
-    // 获取key, uuid
-    get_result(){
-      var res
-      $.ajax({
-        url: '/attachments/get_obs_key',
-        type: 'GET',
-        async: false,
-        success: function(result){
-          res = result
+    async computeMD5Success(md5edFile) {
+      const file = await this.getSuccessChunks(md5edFile);
+      try {
+        if (file.uploadID == '' || file.uuid == '') {
+        // 未上传过
+          await this.newMultiUpload(file);
+          if (file.uploadID != '' && file.uuid != '') {
+            file.chunks = '';
+            this.multipartUpload(file);
+          } else {
+          // 失败如何处理
+            return;
+          }
+          return;
         }
-      });
-      return res
-    },  
 
-    // 构建ObsClient
-    getObsClient(){
-      return new ObsClient({
-        access_key_id: 'FDP3LRMHLB9S77VWEHE3',       
-        secret_access_key: 'LyM82Wk80pgjhs2z7AdDcsdpCWhbsJtSzQ7hkESN',       
-        server : 'https://obs.cn-south-222.ai.pcl.cn'
+        if (file.uploaded == '1') {
+        // 已上传成功
+        // 秒传
+          if (file.attachID == '0') {
+          // 删除数据集记录，未删除文件
+            await addAttachment(file);
+          }
+          //不同数据集上传同一个文件
+          if (file.datasetID != '') {
+            if (Number(file.datasetID) != file.datasetId) {
+              var info = "该文件已上传，对应数据集（" + file.datasetName + "）-文件（" + file.realName + ")";
+              window.alert(info);
+              window.location.reload();
+            }
+          }
+          console.log('文件已上传完成');
+          this.progress = 100;
+          this.status = this.dropzoneParams.data('upload-complete');
+          this.finishUpload(file);
+        } else {
+        // 断点续传
+          this.multipartUpload(file);
+        }
+      } catch (error) {
+        this.emitDropzoneFailed(file);
+        console.log(error);
+      }
+
+      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,
+            type:0
+          })
+        );
+      }
+    },
+
+    async getSuccessChunks(file) {
+      const params = {
+        params: {
+          md5: file.uniqueIdentifier,
+          _csrf: csrf
+        }
+      };
+      try {
+        const response = await axios.get('/attachments/get_chunks', params);
+        file.uploadID = response.data.uploadID;
+        file.uuid = response.data.uuid;
+        file.uploaded = response.data.uploaded;
+        file.chunks = response.data.chunks;
+        file.attachID = response.data.attachID;
+        file.datasetID = response.data.datasetID;
+        file.datasetName = response.data.datasetName;
+        file.realName = response.data.fileName;
+        return file;
+      } catch (error) {
+        this.emitDropzoneFailed(file);
+        console.log('getSuccessChunks catch: ', error);
+        return null;
+      }
+    },
+
+    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
+        }
       });
+      file.uploadID = res.data.uploadID;
+      file.uuid = res.data.uuid;
     },
 
-    // 断点续传
-    do_multi_uploader(file){
-      
-      const result = this.get_result()
-      const upload_datasetId = document
-        .getElementById('datasetId')
-        .getAttribute('datasetId');
-      const obsClient = this.getObsClient()
-      const _this = this
-      var cp;
-      var hook;
+    multipartUpload(file) {
+      const blobSlice =
+          File.prototype.slice ||
+          File.prototype.mozSlice ||
+          File.prototype.webkitSlice,
+        chunkSize = 1024 * 1024 * 64,
+        chunks = Math.ceil(file.size / chunkSize),
+        fileReader = new FileReader(),
+        time = new Date().getTime();
+      let currentChunk = 0;
 
-      obsClient.uploadFile({
-        Bucket : 'testopendata',
-        Key : result.key,
-        SourceFile : file,
-        PartSize : 64 * 1024 * 1024,
+      function loadNext() {
+        const start = currentChunk * chunkSize;
+        const end =
+          start + chunkSize >= file.size ? file.size : start + chunkSize;
+        fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
+      }
 
-        // 更新进度条
-        ProgressCallback : function(transferredAmount, totalAmount, totalSeconds){
-          _this.updateProgress(file, ((transferredAmount / totalAmount) * 100).toFixed(2))
-          _this.status = `${_this.dropzoneParams.data('uploading')} ${(
-            (transferredAmount / totalAmount) *
-            100
-          ).toFixed(2)}%`;
-        },
+      function checkSuccessChunks() {
+        const index = successChunks.indexOf((currentChunk + 1).toString());
+        if (index == -1) {
+          return false;
+        }
+        return true;
+      }
+
+      async function getUploadChunkUrl(currentChunk, partSize) {
+        const res = await axios.get('/attachments/get_multipart_url', {
+          params: {
+            uuid: file.uuid,
+            uploadID: file.uploadID,
+            size: partSize,
+            chunkNumber: currentChunk + 1,
+            _csrf: csrf
+          }
+        });
+        urls[currentChunk] = res.data.url;
+      }
 
-        // 监听文件上传结果
-        EventCallback : function(eventType, eventParam, eventResult){
+      async function uploadMinio(url, e) {
+        const res = await axios.put(url, e.target.result);
+        etags[currentChunk] = res.headers.etag;
+      }
 
-          // 文件上传成功
-          if(eventType == 'completeMultipartUploadSucceed'){
-            console.log("file = ", file)
-            $.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)
+      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 uploadChunk(e) {
+        try {
+          if (!checkSuccessChunks()) {
+            const start = currentChunk * chunkSize;
+            const partSize =
+            start + chunkSize >= file.size ? file.size - start : chunkSize;
+            // 获取分片上传url
+            await getUploadChunkUrl(currentChunk, partSize);
+            if (urls[currentChunk] != '') {
+            // 上传到minio
+              await uploadMinio(urls[currentChunk], e);
+              if (etags[currentChunk] != '') {
+              // 更新数据库：分片上传结果
+                //await updateChunk(currentChunk);
+              } else {
+                console.log("上传到minio uploadChunk etags[currentChunk] == ''");// TODO
               }
-            });
-            
+            } else {
+              console.log("uploadChunk urls[currentChunk] != ''");// TODO
+            }
           }
-        },
-        ResumeCallback : function(resumeHook, uploadCheckpoint){
-          hook = resumeHook;
-          cp = uploadCheckpoint;
+        } catch (error) {
+          this.emitDropzoneFailed(file);
+          console.log(error);
         }
-      }, function(err, result){     
-          // 出现错误，再次调用断点续传接口，继续上传任务
-          if(err){
-            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)}%`;
-              },
+      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
+          })
+        );
+      }
 
-              // 监听断点续传的结果
-              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("经过断点上传之后还是不能上传成功，该分段上传失败")
-                }
-              }
-            });   
-          }
-      });
-    },
+      const successChunks = [];
+      let successParts = [];
+      successParts = file.chunks.split(',');
+      for (let i = 0; i < successParts.length; i++) {
+        successChunks[i] = successParts[i].split('-')[0];
+      }
+      const urls = []; // TODO const ?
+      const etags = [];
+      console.log('上传分片...');
+      this.status = this.dropzoneParams.data('uploading');
+      loadNext();
+      fileReader.onload = async (e) => {
+        await uploadChunk(e);
+        fileReader.abort();
+        currentChunk++;
+        if (currentChunk < chunks) {
+          console.log(
+            `第${currentChunk}个分片上传完成, 开始第${currentChunk +
+              1}/${chunks}个分片上传`
+          );
+          this.progress = Math.ceil((currentChunk / chunks) * 100);
+          this.updateProgress(file, ((currentChunk / chunks) * 100).toFixed(2));
+          this.status = `${this.dropzoneParams.data('uploading')} ${(
+            (currentChunk / chunks) *
+            100
+          ).toFixed(2)}%`;
+          await loadNext();
+        } else {
+          await completeUpload();
+          console.log(
+            `文件上传完成：${file.name} \n分片：${chunks} 大小:${
+              file.size
+            } 用时：${(new Date().getTime() - time) / 1000} s`
+          );
+          this.progress = 100;
+          this.status = this.dropzoneParams.data('upload-complete');
+          this.finishUpload(file);
+        }
+      };
+    }
   }
 };
 </script>
diff --git a/web_src/js/components/ObsUploader.vue b/web_src/js/components/ObsUploader.vue
new file mode 100755
index 000000000..9ab59f320
--- /dev/null
+++ b/web_src/js/components/ObsUploader.vue
@@ -0,0 +1,298 @@
+<template>
+  <div class="dropzone-wrapper dataset-files">
+    <div
+      id="dataset"
+      class="dropzone"
+    />
+
+    <p class="upload-info">
+      {{ file_status_text }}
+      <span class="success">{{ status }}</span>
+    </p>
+  </div> 
+</template>
+
+<script>
+/* eslint-disable eqeqeq */
+// import Dropzone from 'dropzone/dist/dropzone.js';
+// import 'dropzone/dist/dropzone.css'
+import createDropzone from '../features/dropzone.js';
+import ObsClient from 'esdk-obs-browserjs';
+
+const {_AppSubUrl, _StaticUrlPrefix, csrf} = window.config;
+
+export default {
+  data() {
+    return {
+      dropzoneUploader: null,
+      maxFiles: 1,
+      maxFilesize: 1 * 1024 * 1024 * 1024 * 1024,
+      acceptedFiles: '*/*',
+      progress: 0,
+      status: '',
+      dropzoneParams: {},
+      file_status_text: ''
+    };
+  },
+
+  async mounted() {
+    this.dropzoneParams = $('div#minioUploader-params');
+    this.file_status_text = this.dropzoneParams.data('file-status');
+    this.status = this.dropzoneParams.data('file-init-status');
+
+    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></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>';
+
+    const $dropzone = $('div#dataset');
+    console.log('createDropzone');
+
+    const dropzoneUploader = await createDropzone($dropzone[0], {
+      url: '/todouploader',
+      maxFiles: this.maxFiles,
+      maxFilesize: this.maxFileSize,
+      timeout: 0,
+      autoQueue: 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,
+    });
+
+    // 将文件加入文件列表
+    dropzoneUploader.on('addedfile', (file) => {
+      if(file.status == 'added'){
+        this.onFileAdded(file)
+      } 
+    });
+
+    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);
+    });
+
+    this.dropzoneUploader = dropzoneUploader;
+  },
+
+  methods: {
+    resetStatus() {
+      this.progress = 0;
+      this.status = '';
+    },
+    updateProgress(file, progress) {
+     file.previewTemplate.querySelector(
+      '.dz-upload'
+      ).style.width = `${progress}%`;
+    },
+    emitDropzoneSuccess(file) {
+      file.status = 'success';
+      this.dropzoneUploader.emit('success', file);
+      this.dropzoneUploader.emit('complete', file);
+    },
+    emitDropzoneFailed(file) {
+      this.status = this.dropzoneParams.data('falied');
+      file.status = 'error';
+      this.dropzoneUploader.emit('error', file);
+    },
+
+    onFileAdded(file) {
+      this.resetStatus();
+      this.status = this.dropzoneParams.data('obs-connecting');
+      this.do_multi_uploader(file) 
+    },
+
+    // 获取key, uuid
+    get_result(){
+      var res
+      $.ajax({
+        url: '/attachments/get_obs_key',
+        type: 'GET',
+        async: false,
+        success: function(result){
+          res = result
+        }
+      });
+      return res
+    },  
+
+    // 构建ObsClient
+    getObsClient(){
+      return new ObsClient({
+        access_key_id: 'FDP3LRMHLB9S77VWEHE3',       
+        secret_access_key: 'LyM82Wk80pgjhs2z7AdDcsdpCWhbsJtSzQ7hkESN',       
+        server : 'https://obs.cn-south-222.ai.pcl.cn'
+      });
+    },
+
+    // 断点续传
+    do_multi_uploader(file){
+      
+      const result = this.get_result()
+      const upload_datasetId = document
+        .getElementById('datasetId')
+        .getAttribute('datasetId');
+      const obsClient = this.getObsClient()
+      const _this = this
+      var cp;
+      var hook;
+
+      obsClient.uploadFile({
+        Bucket : 'testopendata',
+        Key : result.key,
+        SourceFile : file,
+        PartSize : 64 * 1024 * 1024,
+
+        // 更新进度条
+        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("eventType1= ", eventType)
+          console.log("eventParam1= ", eventParam)
+          console.log("eventResult1= ", eventResult)
+          // 文件上传成功
+          if(eventType == 'completeMultipartUploadSucceed'){
+            console.log("file = ", file)
+            $.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)
+                setTimeout(() => {
+                  window.location.reload();
+                }, 1000);
+              },
+              error: function(){
+                _this.emitDropzoneFailed(file)
+              }
+            });
+          }
+        },
+        ResumeCallback : function(resumeHook, uploadCheckpoint){
+          hook = resumeHook;
+          cp = uploadCheckpoint;
+        }
+      }, function(err, result){     
+          // 出现错误，再次调用断点续传接口，继续上传任务
+          if(err){
+            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){
+                console.log("eventType2= ", eventType)
+                console.log("eventParam2= ", eventParam)
+                console.log("eventResult2= ", 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)
+                      setTimeout(() => {
+                        window.location.reload();
+                      }, 1000);
+                      console.log(data)
+                    },
+                    error: function(){
+                      _this.emitDropzoneFailed(file)
+                    }
+                  });
+                }
+                if (eventType == 'uploadPartFailed'){
+                  _this.emitDropzoneFailed(file)
+                }
+              }
+            });   
+          }
+      });
+    },
+  }
+};
+</script>
+
+<style>
+.dropzone-wrapper {
+  margin: 2em auto;
+}
+.ui .dropzone {
+  border: 2px dashed #0087f5;
+  box-shadow: none !important;
+  padding: 0;
+  min-height: 5rem;
+  border-radius: 4px;
+}
+.dataset .dataset-files #dataset .dz-preview.dz-file-preview,
+.dataset .dataset-files #dataset .dz-preview.dz-processing {
+  display: flex;
+  align-items: center;
+}
+.dataset .dataset-files #dataset .dz-preview {
+  border-bottom: 1px solid #dadce0;
+  min-height: 0;
+}
+</style>
\ No newline at end of file
diff --git a/web_src/js/index.js b/web_src/js/index.js
index 140a855a0..ddb69f701 100755
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -29,6 +29,7 @@ import {
 } from './features/notification.js';
 import {createCodeEditor} from './features/codeeditor.js';
 import MinioUploader from './components/MinioUploader.vue';
+import ObsUploader from './components/ObsUploader.vue'
 
 const {AppSubUrl, StaticUrlPrefix, csrf} = window.config;
 
@@ -2955,6 +2956,7 @@ $(document).ready(async () => {
   initCodeView();
   initVueApp();
   initVueUploader();
+  initObsUploader();
   initTeamSettings();
   initCtrlEnterSubmit();
   initNavbarContentToggle();
@@ -3641,6 +3643,21 @@ function initVueUploader() {
   });
 }
 
+// 新增
+function initObsUploader() {
+  const el = document.getElementById('obsUploader');
+  if (!el) {
+    return;
+  }
+
+  new Vue({
+    el: '#obsUploader',
+    components: {ObsUploader},
+    template: '<ObsUploader />'
+  });
+}
+
+
 window.timeAddManual = function () {
   $('.mini.modal')
     .modal({