From 724b6bf8270a172bd18470b06d3db7fcaaa881ad Mon Sep 17 00:00:00 2001 From: palytoxin Date: Fri, 14 Aug 2020 15:00:58 +0800 Subject: [PATCH] create i18n field to dropzone --- options/locale/locale_en-US.ini | 7 ++++++ options/locale/locale_zh-CN.ini | 7 ++++++ templates/repo/datasets/index.tmpl | 25 ++++++++++++++++++- web_src/js/components/MinioUploader.vue | 32 ++++++++++++++----------- 4 files changed, 56 insertions(+), 15 deletions(-) diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini index db2c35dfb..bc7609711 100644 --- a/options/locale/locale_en-US.ini +++ b/options/locale/locale_en-US.ini @@ -2426,6 +2426,13 @@ default_message = Drop files or click here to upload. invalid_input_type = You can not upload files of this type. file_too_big = File size ({{filesize}} MB) exceeds the maximum size of ({{maxFilesize}} MB). remove_file = Remove file +file_status = Upload status: +file_init_status = Drop files or click here to upload. +waitting_uploading = Please wait for the first file transfer to complete +md5_computing = MD5 computing +loading_file = Loading +uploading = Uploading +upload_complete = Uploading complete [notification] notifications = Notifications diff --git a/options/locale/locale_zh-CN.ini b/options/locale/locale_zh-CN.ini index e683b92a6..b45f5c3c5 100755 --- a/options/locale/locale_zh-CN.ini +++ b/options/locale/locale_zh-CN.ini @@ -2427,6 +2427,13 @@ default_message=拖动文件或者点击此处上传。 invalid_input_type=您不能上传该类型的文件 file_too_big=文件体积（{{filesize}} MB）超过了最大允许体积（{{maxFilesize}} MB） remove_file=移除文件 +file_status=文件处理状态： +file_init_status=等待上传 +waitting_uploading=请等待文件传输完成 +md5_computing=计算MD5 +loading_file=加载文件 +uploading=正在上传 +upload_complete=上传完成 [notification] notifications=通知 diff --git a/templates/repo/datasets/index.tmpl b/templates/repo/datasets/index.tmpl index 92ced788f..9e047698c 100755 --- a/templates/repo/datasets/index.tmpl +++ b/templates/repo/datasets/index.tmpl @@ -66,7 +66,30 @@
- diff --git a/web_src/js/components/MinioUploader.vue b/web_src/js/components/MinioUploader.vue index 594af1828..9cf79a951 100755 --- a/web_src/js/components/MinioUploader.vue +++ b/web_src/js/components/MinioUploader.vue @@ -2,8 +2,7 @@
-

文件处理状态：{{ status }}

-

文件上传进度：{{ progress }}%

+

{{file_status_text}} {{ status }}

@@ -29,12 +28,16 @@ export default { maxFilesize: 1 * 1024 * 1024 * 1024 * 1024, acceptedFiles: '*/*', progress: 0, - status: '等待上传', + status: '', + dropzoneParams: {}, + file_status_text: '', } }, async mounted() { - const $dropzoneParams = $('div#minioUploader-params') + this.dropzoneParams = $('div#minioUploader-params') + this.file_status_text = this.dropzoneParams.data('file-status') + this.status = this.dropzoneParams.data('file-init-status') const $dropzone = $('div#dropzone') const dropzoneUploader = await createDropzone($dropzone[0], { url: '/todouploader', @@ -42,10 +45,10 @@ export default { maxFilesize: this.maxFileSize, timeout: 0, autoQueue: false, - dictDefaultMessage: $dropzoneParams.data('default-message'), - dictInvalidFileType: $dropzoneParams.data('invalid-input-type'), - dictFileTooBig: $dropzoneParams.data('file-too-big'), - dictRemoveFile: $dropzoneParams.data('remove-file'), + 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'), }) dropzoneUploader.on("addedfile", (file) => { setTimeout(() => { @@ -54,7 +57,7 @@ export default { }); dropzoneUploader.on("maxfilesexceeded", function(file) { if (this.files[0].status !== 'success') { - alert('请等待第一个文件传输完成') + alert(this.dropzoneParams.data('waitting-uploading')) this.removeFile(file) return } @@ -101,7 +104,7 @@ export default { fileReader = new FileReader(); let time = new Date().getTime(); // console.log('计算MD5...') - this.status = '计算MD5'; + this.status = this.dropzoneParams.data('md5-computing') file.totalChunkCounts = chunks; loadNext(); @@ -118,7 +121,7 @@ export default { currentChunk++; if (currentChunk < chunks) { // console.log(`第${currentChunk}分片解析完成, 开始第${currentChunk +1}/${chunks}分片解析`); - this.status = `加载文件 ${(currentChunk/chunks*100).toFixed(2)}% (${currentChunk}/${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 @@ -162,7 +165,7 @@ export default { } console.log("文件已上传完成"); this.progress = 100; - this.status = '上传完成'; + this.status = this.dropzoneParams.data('upload-complete') this.finishUpload(file) } else { //断点续传 @@ -306,7 +309,7 @@ export default { var urls = new Array(); var etags = new Array(); console.log('上传分片...'); - this.status = '上传中' + this.status = this.dropzoneParams.data('uploading') loadNext(); fileReader.onload = async (e) => { await uploadChunk(e); @@ -315,12 +318,13 @@ export default { 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.status = this.dropzoneParams.data('upload-complete') this.finishUpload(file) } };