fix: 解决文件上传可以拖入文件夹的问题 (#1840)

Refs https://github.com/1Panel-dev/1Panel/issues/1833

frontend/src/components/upload/index.vue

@@ -80,7 +80,7 @@
 
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
-import { computeSize } from '@/utils/util';
+import { checkFileType, computeSize } from '@/utils/util';
 import { useDeleteData } from '@/hooks/use-delete-data';
 import { handleRecoverByUpload } from '@/api/modules/setting';
 import i18n from '@/lang';
@@ -184,7 +184,9 @@ const beforeAvatarUpload = (rawFile) => {
 };
 
 const fileOnChange = (_uploadFile: UploadFile, uploadFiles: UploadFiles) => {
+    if (checkFileType(_uploadFile, uploadFiles)) {
         uploaderFiles.value = uploadFiles;
+    }
 };
 
 const handleClose = () => {

frontend/src/lang/modules/en.ts

@@ -895,6 +895,7 @@ const message = {
         uploadFailed: '[{0}] File Upload file',
         fileUploadStart: 'Uploading [{0}]....',
         currentSelect: 'Current Select: ',
+        unsupportType: 'Unsupported file type',
     },
     ssh: {
         sshAlert:

frontend/src/lang/modules/tw.ts

@@ -865,6 +865,7 @@ const message = {
         uploadFailed: '【{0}】 文件上傳失敗',
         fileUploadStart: '正在上傳【{0}】....',
         currentSelect: '當前選中: ',
+        unsupportType: '不支持的文件類型',
     },
     ssh: {
         sshAlert: '列表數據根據登錄時間排序，但請註意，切換時區或其他操作可能導致登錄日誌的時間出現偏差。',

frontend/src/lang/modules/zh.ts

@@ -865,6 +865,7 @@ const message = {
         uploadFailed: '【{0}】 文件上传失败',
         fileUploadStart: '正在上传【{0}】....',
         currentSelect: '当前选中: ',
+        unsupportType: '不支持的文件类型',
     },
     ssh: {
         sshAlert: '列表数据根据登录时间排序，但请注意，切换时区或其他操作可能导致登录日志的时间出现偏差。',

frontend/src/utils/util.ts

@@ -1,4 +1,6 @@
 import i18n from '@/lang';
+import { UploadFile, UploadFiles } from 'element-plus';
+import { MsgWarning } from './message';
 
 export function deepCopy<T>(obj: any): T {
     let newObj: any;
@@ -305,3 +307,15 @@ export function downloadWithContent(content: string, fileName: string) {
     const event = new MouseEvent('click');
     a.dispatchEvent(event);
 }
+
+export function checkFileType(_uploadFile: UploadFile, uploadFiles: UploadFiles): boolean {
+    if (_uploadFile.raw?.type == '') {
+        const index = uploadFiles.findIndex((file) => file.name === _uploadFile.name && file.raw?.type === '');
+        if (index !== -1) {
+            uploadFiles.splice(index, 1);
+        }
+        MsgWarning(i18n.global.t('file.unsupportType'));
+        return false;
+    }
+    return true;
+}

frontend/src/views/host/file-management/upload/index.vue

@@ -48,6 +48,7 @@ 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 { checkFileType } from '@/utils/util';
 
 interface UploadFileProps {
     path: string;
@@ -70,7 +71,9 @@ const handleClose = () => {
 const uploaderFiles = ref<UploadFiles>([]);
 
 const fileOnChange = (_uploadFile: UploadFile, uploadFiles: UploadFiles) => {
+    if (checkFileType(_uploadFile, uploadFiles)) {
         uploaderFiles.value = uploadFiles;
+    }
 };
 
 const handleExceed: UploadProps['onExceed'] = (files) => {