fix: 解决文件上传拖拽栏上传多文件失败问题 (#5655)

Refs #4746

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<UploadFiles>([]);
-const hoverIndex = ref(null);
+const hoverIndex = ref<number | null>(null);
 const tmpFiles = ref<UploadFiles>([]);
 const breakFlag = ref(false);
 
 const upload = (command: string) => {
-    if (command == 'dir') {
+    state.uploadEle.webkitdirectory = command == 'dir';
-        state.uploadEle.webkitdirectory = true;
-    } else {
-        state.uploadEle.webkitdirectory = false;
-    }
     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 entries = Array.from(items).map((item) => item.webkitGetAsEntry());
-            const entry = items[i].webkitGetAsEntry();
+        await Promise.all(entries.map((entry) => traverseFileTree(entry)));
-            if (entry) {
-                await 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<any[]>((resolve) => {
-                dirReader.readEntries((entries) => {
+                dirReader.readEntries((entries: any[] | PromiseLike<any[]>) => {
                     resolve(entries);
                 });
             });
@@ -218,8 +210,8 @@ const traverseFileTree = async (item: any, path = '') => {
                 return;
             }
 
-            for (let i = 0; i < entries.length; i++) {
+            for (const element of entries) {
-                await traverseFileTree(entries[i], path + item.name + '/');
+                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;
 };