diff --git a/frontend/src/views/host/file-management/upload/index.vue b/frontend/src/views/host/file-management/upload/index.vue index 0bb6c13c3..a1ee33c50 100644 --- a/frontend/src/views/host/file-management/upload/index.vue +++ b/frontend/src/views/host/file-management/upload/index.vue @@ -39,7 +39,7 @@ ref="uploadRef" :on-change="fileOnChange" :on-exceed="handleExceed" - :on-success="hadleSuccess" + :on-success="handleSuccess" :show-file-list="false" multiple v-model:file-list="uploaderFiles" @@ -95,7 +95,7 @@ import { ChunkUploadFileData, UploadFileData } from '@/api/modules/files'; import i18n from '@/lang'; import DrawerHeader from '@/components/drawer-header/index.vue'; import { MsgError, MsgSuccess, MsgWarning } from '@/utils/message'; -import { Close } from '@element-plus/icons-vue'; +import { Close, Document, UploadFilled } from '@element-plus/icons-vue'; import { TimeoutEnum } from '@/enums/http-enum'; interface UploadFileProps { @@ -119,16 +119,12 @@ const state = reactive({ uploadEle: null, }); const uploaderFiles = ref([]); -const hoverIndex = ref(null); +const hoverIndex = ref(null); const tmpFiles = ref([]); const breakFlag = ref(false); const upload = (command: string) => { - if (command == 'dir') { - state.uploadEle.webkitdirectory = true; - } else { - state.uploadEle.webkitdirectory = false; - } + state.uploadEle.webkitdirectory = command == 'dir'; uploadRef.value.$el.querySelector('input').value = ''; uploadRef.value.$el.querySelector('input').click(); }; @@ -149,15 +145,11 @@ const initTempFiles = () => { const handleDrop = async (event: DragEvent) => { initTempFiles(); event.preventDefault(); - const items = event.dataTransfer.items; + const items = event.dataTransfer?.items; if (items) { - for (let i = 0; i < items.length; i++) { - const entry = items[i].webkitGetAsEntry(); - if (entry) { - await traverseFileTree(entry); - } - } + const entries = Array.from(items).map((item) => item.webkitGetAsEntry()); + await Promise.all(entries.map((entry) => traverseFileTree(entry))); if (!breakFlag.value) { uploaderFiles.value = uploaderFiles.value.concat(tmpFiles.value); } else { @@ -209,7 +201,7 @@ const traverseFileTree = async (item: any, path = '') => { const dirReader = item.createReader(); const readEntries = async () => { const entries = await new Promise((resolve) => { - dirReader.readEntries((entries) => { + dirReader.readEntries((entries: any[] | PromiseLike) => { resolve(entries); }); }); @@ -218,8 +210,8 @@ const traverseFileTree = async (item: any, path = '') => { return; } - for (let i = 0; i < entries.length; i++) { - await traverseFileTree(entries[i], path + item.name + '/'); + for (const element of entries) { + await traverseFileTree(element, path + item.name + '/'); if (breakFlag.value) { return; } @@ -230,7 +222,7 @@ const traverseFileTree = async (item: any, path = '') => { } }; -const handleDragleave = (event) => { +const handleDragleave = (event: { preventDefault: () => void }) => { event.preventDefault(); }; @@ -259,7 +251,7 @@ const handleExceed: UploadProps['onExceed'] = () => { MsgWarning(i18n.global.t('file.uploadOverLimit')); }; -const hadleSuccess: UploadProps['onSuccess'] = (res, file) => { +const handleSuccess: UploadProps['onSuccess'] = (res, file) => { file.status = 'success'; }; @@ -349,7 +341,7 @@ const getPathWithoutFilename = (path: string) => { return path ? path.split('/').slice(0, -1).join('/') : path; }; -const getFilenameFromPath = (path) => { +const getFilenameFromPath = (path: string) => { return path ? path.split('/').pop() : path; };