test/1Panel
1
0
Fork 0
mirror of https://gitee.com/fit2cloud-feizhiyun/1Panel.git synced 2024-12-03 12:29:03 +08:00
Code Issues Actions 12 Packages Projects Releases Wiki Activity

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

Browse Source 
Refs #4746
This commit is contained in:
蘭 2024-07-03 15:01:28 +08:00 committed by GitHub
parent 8888c9f4ee
commit a8842c806c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 13 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -39,7 +39,7 @@
ref="uploadRef" ref="uploadRef"
:on-change="fileOnChange" :on-change="fileOnChange"
:on-exceed="handleExceed" :on-exceed="handleExceed"
:on-success="hadleSuccess" :on-success="handleSuccess"
:show-file-list="false" :show-file-list="false"
multiple multiple
v-model:file-list="uploaderFiles" v-model:file-list="uploaderFiles"
@ -95,7 +95,7 @@ import { ChunkUploadFileData, UploadFileData } from '@/api/modules/files';
import i18n from '@/lang'; import i18n from '@/lang';
import DrawerHeader from '@/components/drawer-header/index.vue'; import DrawerHeader from '@/components/drawer-header/index.vue';
import { MsgError, MsgSuccess, MsgWarning } from '@/utils/message'; 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'; import { TimeoutEnum } from '@/enums/http-enum';
interface UploadFileProps { interface UploadFileProps {
@ -119,16 +119,12 @@ const state = reactive({
uploadEle: null, uploadEle: null,
}); });
const uploaderFiles = ref<UploadFiles>([]); const uploaderFiles = ref<UploadFiles>([]);
const hoverIndex = ref(null); const hoverIndex = ref<number | null>(null);
const tmpFiles = ref<UploadFiles>([]); const tmpFiles = ref<UploadFiles>([]);
const breakFlag = ref(false); const breakFlag = ref(false);
const upload = (command: string) => { 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').value = '';
uploadRef.value.$el.querySelector('input').click(); uploadRef.value.$el.querySelector('input').click();
}; };
@ -149,15 +145,11 @@ const initTempFiles = () => {
const handleDrop = async (event: DragEvent) => { const handleDrop = async (event: DragEvent) => {
initTempFiles(); initTempFiles();
event.preventDefault(); event.preventDefault();
const items = event.dataTransfer.items; const items = event.dataTransfer?.items;
if (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) { if (!breakFlag.value) {
uploaderFiles.value = uploaderFiles.value.concat(tmpFiles.value); uploaderFiles.value = uploaderFiles.value.concat(tmpFiles.value);
} else { } else {
@ -209,7 +201,7 @@ const traverseFileTree = async (item: any, path = '') => {
const dirReader = item.createReader(); const dirReader = item.createReader();
const readEntries = async () => { const readEntries = async () => {
const entries = await new Promise<any[]>((resolve) => { const entries = await new Promise<any[]>((resolve) => {
dirReader.readEntries((entries) => { dirReader.readEntries((entries: any[] | PromiseLike<any[]>) => {
resolve(entries); resolve(entries);
}); });
}); });
@ -218,8 +210,8 @@ const traverseFileTree = async (item: any, path = '') => {
return; 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) { if (breakFlag.value) {
return; return;
} }
@ -230,7 +222,7 @@ const traverseFileTree = async (item: any, path = '') => {
} }
}; };
const handleDragleave = (event) => { const handleDragleave = (event: { preventDefault: () => void }) => {
event.preventDefault(); event.preventDefault();
}; };
@ -259,7 +251,7 @@ const handleExceed: UploadProps['onExceed'] = () => {
MsgWarning(i18n.global.t('file.uploadOverLimit')); MsgWarning(i18n.global.t('file.uploadOverLimit'));
}; };
const hadleSuccess: UploadProps['onSuccess'] = (res, file) => { const handleSuccess: UploadProps['onSuccess'] = (res, file) => {
file.status = 'success'; file.status = 'success';
}; };
@ -349,7 +341,7 @@ const getPathWithoutFilename = (path: string) => {
return path ? path.split('/').slice(0, -1).join('/') : path; return path ? path.split('/').slice(0, -1).join('/') : path;
}; };
const getFilenameFromPath = (path) => { const getFilenameFromPath = (path: string) => {
return path ? path.split('/').pop() : path; return path ? path.split('/').pop() : path;
}; };