mirror/1Panel
1
0
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2024-11-27 20:49:03 +08:00
Code Issues Actions 8 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"
: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 = 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<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++) {
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;
};