From 76f495fc83e5d91f852e40fa2af3f893edd5f3fc Mon Sep 17 00:00:00 2001
From: zhengkunwang <31820853+zhengkunwang223@users.noreply.github.com>
Date: Sun, 5 Nov 2023 21:37:40 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=A7=A3=E5=86=B3=E6=96=87=E4=BB=B6?=
=?UTF-8?q?=E6=8B=96=E6=8B=BD=E4=B8=8A=E4=BC=A0=E7=A9=BA=E6=96=87=E4=BB=B6?=
=?UTF-8?q?=E5=A4=B9=E5=A4=B1=E8=B4=A5=E7=9A=84=E9=97=AE=E9=A2=98=20(#2806?=
=?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
frontend/src/lang/modules/en.ts | 2 +
frontend/src/lang/modules/tw.ts | 2 +
frontend/src/lang/modules/zh.ts | 2 +
.../host/file-management/upload/index.vue | 117 +++++++++---------
4 files changed, 66 insertions(+), 57 deletions(-)
diff --git a/frontend/src/lang/modules/en.ts b/frontend/src/lang/modules/en.ts
index 12af197d8..7d4a287f0 100644
--- a/frontend/src/lang/modules/en.ts
+++ b/frontend/src/lang/modules/en.ts
@@ -988,6 +988,8 @@ const message = {
addFavorite: 'Add to favorites',
clearList: 'Clear list',
deleteRecycleHelper: 'Are you sure you want to permanently delete the following files?',
+ typeErrOrEmpty: '[{0}] file type is wrong or empty folder',
+ dropHelper: 'Drag [{0}] here, or',
},
ssh: {
autoStart: 'Auto Start',
diff --git a/frontend/src/lang/modules/tw.ts b/frontend/src/lang/modules/tw.ts
index a30066647..6883f53ec 100644
--- a/frontend/src/lang/modules/tw.ts
+++ b/frontend/src/lang/modules/tw.ts
@@ -949,6 +949,8 @@ const message = {
addFavorite: '加入收藏夾',
clearList: '清空列表',
deleteRecycleHelper: '確定永久刪除以下文件？',
+ typeErrOrEmpty: '【{0}】 檔案類型錯誤或為空資料夾',
+ dropHelper: '將【{0}】拖曳到此處，或',
},
ssh: {
autoStart: '開機自啟',
diff --git a/frontend/src/lang/modules/zh.ts b/frontend/src/lang/modules/zh.ts
index 56310112f..c24f2292c 100644
--- a/frontend/src/lang/modules/zh.ts
+++ b/frontend/src/lang/modules/zh.ts
@@ -950,6 +950,8 @@ const message = {
addFavorite: '加入收藏夹子',
clearList: '清空列表',
deleteRecycleHelper: '确定永久删除以下文件？',
+ typeErrOrEmpty: '【{0}】 文件类型错误或为空文件夹',
+ dropHelper: '将【{0}】拖拽到此处，或者',
},
ssh: {
autoStart: '开机自启',
diff --git a/frontend/src/views/host/file-management/upload/index.vue b/frontend/src/views/host/file-management/upload/index.vue
index 67f8513a4..35d9af030 100644
--- a/frontend/src/views/host/file-management/upload/index.vue
+++ b/frontend/src/views/host/file-management/upload/index.vue
@@ -10,22 +10,12 @@
@@ -43,7 +33,7 @@
>
- {{ $t('database.dropHelper') }}
+ {{ $t('file.dropHelper', [$t('file.' + uploadType)]) }}
{{ $t('database.clickHelper') }}
@@ -93,7 +83,7 @@ import { UploadFile, UploadFiles, UploadInstance, UploadProps, UploadRawFile } f
import { ChunkUploadFileData, UploadFileData } from '@/api/modules/files';
import i18n from '@/lang';
import DrawerHeader from '@/components/drawer-header/index.vue';
-import { MsgSuccess } from '@/utils/message';
+import { MsgError, MsgSuccess } from '@/utils/message';
import { Close } from '@element-plus/icons-vue';
interface UploadFileProps {
@@ -119,8 +109,10 @@ const state = reactive({
const uploaderFiles = ref([]);
const isUploadFolder = ref(false);
const hoverIndex = ref(null);
+const uploadType = ref('file');
const upload = (commnad: string) => {
+ uploadType.value = commnad;
if (commnad == 'dir') {
state.uploadEle.webkitdirectory = true;
} else {
@@ -135,7 +127,15 @@ const removeFile = (index: number) => {
};
const fileOnChange = (_uploadFile: UploadFile, uploadFiles: UploadFiles) => {
- uploaderFiles.value = uploadFiles;
+ const reader = new FileReader();
+ reader.readAsDataURL(_uploadFile.raw);
+ reader.onload = async () => {
+ uploaderFiles.value = uploadFiles;
+ };
+ reader.onerror = () => {
+ uploaderFiles.value = uploaderFiles.value.filter((file) => file.uid !== _uploadFile.uid);
+ MsgError(i18n.global.t('file.typeErrOrEmpty', [_uploadFile.name]));
+ };
};
const clearFiles = () => {
@@ -160,56 +160,59 @@ const submit = async () => {
const files = uploaderFiles.value.slice();
for (let i = 0; i < files.length; i++) {
const file = files[i];
- const CHUNK_SIZE = 1024 * 1024; // 1MB
const fileSize = file.size;
uploadHelper.value = i18n.global.t('file.fileUploadStart', [file.name]);
- if (fileSize == 0) {
+ if (fileSize <= 1024 * 1024 * 50) {
const formData = new FormData();
formData.append('file', file.raw);
formData.append('path', path.value);
await UploadFileData(formData, {});
- }
+ success++;
+ uploaderFiles.value[i].status = 'success';
+ } else {
+ const CHUNK_SIZE = 1024 * 1024 * 20; // 10MB
+ const chunkCount = Math.ceil(fileSize / CHUNK_SIZE);
+ let uploadedChunkCount = 0;
+ for (let c = 0; c < chunkCount; c++) {
+ const start = c * CHUNK_SIZE;
+ const end = Math.min(start + CHUNK_SIZE, fileSize);
+ const chunk = file.raw.slice(start, end);
+ const formData = new FormData();
- const chunkCount = Math.ceil(fileSize / CHUNK_SIZE);
- let uploadedChunkCount = 0;
- for (let c = 0; c < chunkCount; c++) {
- const start = c * CHUNK_SIZE;
- const end = Math.min(start + CHUNK_SIZE, fileSize);
- const chunk = file.raw.slice(start, end);
- const formData = new FormData();
+ formData.append('filename', file.name);
+ if (file.raw.webkitRelativePath != '') {
+ formData.append('path', path.value + '/' + getPathWithoutFilename(file.raw.webkitRelativePath));
+ } else {
+ formData.append('path', path.value);
+ }
+ formData.append('chunk', chunk);
+ formData.append('chunkIndex', c.toString());
+ formData.append('chunkCount', chunkCount.toString());
- formData.append('filename', file.name);
- if (file.raw.webkitRelativePath != '') {
- formData.append('path', path.value + '/' + getPathWithoutFilename(file.raw.webkitRelativePath));
- } else {
- formData.append('path', path.value);
- }
- formData.append('chunk', chunk);
- formData.append('chunkIndex', c.toString());
- formData.append('chunkCount', chunkCount.toString());
-
- try {
- await ChunkUploadFileData(formData, {
- onUploadProgress: (progressEvent) => {
- const progress = Math.round(
- ((uploadedChunkCount + progressEvent.loaded / progressEvent.total) * 100) / chunkCount,
- );
- uploadPrecent.value = progress;
- },
- timeout: 40000,
- });
- uploadedChunkCount++;
- } catch (error) {
- uploaderFiles.value[i].status = 'fail';
- break;
- }
- if (uploadedChunkCount == chunkCount) {
- success++;
- uploaderFiles.value[i].status = 'success';
- break;
+ try {
+ await ChunkUploadFileData(formData, {
+ onUploadProgress: (progressEvent) => {
+ const progress = Math.round(
+ ((uploadedChunkCount + progressEvent.loaded / progressEvent.total) * 100) / chunkCount,
+ );
+ uploadPrecent.value = progress;
+ },
+ timeout: 40000,
+ });
+ uploadedChunkCount++;
+ } catch (error) {
+ uploaderFiles.value[i].status = 'fail';
+ break;
+ }
+ if (uploadedChunkCount == chunkCount) {
+ success++;
+ uploaderFiles.value[i].status = 'success';
+ break;
+ }
}
}
+
if (i == files.length - 1) {
loading.value = false;
uploadHelper.value = '';