diff --git a/templates/repo/datasets/dataset.tmpl b/templates/repo/datasets/dataset.tmpl index 29f90f9af..9a42c7a56 100755 --- a/templates/repo/datasets/dataset.tmpl +++ b/templates/repo/datasets/dataset.tmpl @@ -2,7 +2,20 @@
-
+
diff --git a/templates/repo/datasets/index.tmpl b/templates/repo/datasets/index.tmpl index e5e93a01a..e7fc7516c 100755 --- a/templates/repo/datasets/index.tmpl +++ b/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 @@ {{template "base/delete_modal_actions" .}} -{{template "base/footer" .}} \ No newline at end of file +{{template "base/footer" .}} diff --git a/web_src/js/components/MinioUploader.vue b/web_src/js/components/MinioUploader.vue index 802d0fd74..b0f80bc82 100755 --- a/web_src/js/components/MinioUploader.vue +++ b/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); - } - } };