gh_mirrors/1Panel
1
0
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-01-19 16:29:17 +08:00
Code

feat: 限制上传文件数量

Browse Source
This commit is contained in:
zhengkunwang223 2023-03-13 14:48:24 +08:00 committed by zhengkunwang223
parent e36cbb0eb7
commit f009e6414a
1 changed files with 12 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,9 +14,10 @@
drag drag
:auto-upload="false" :auto-upload="false"
ref="uploadRef" ref="uploadRef"
:multiple="true"
:on-change="fileOnChange" :on-change="fileOnChange"
v-loading="loading" v-loading="loading"
:limit="1"
:on-exceed="handleExceed"
> >
<el-icon class="el-icon--upload"><upload-filled /></el-icon> <el-icon class="el-icon--upload"><upload-filled /></el-icon>
<div class="el-upload__text"> <div class="el-upload__text">
@ -38,17 +39,18 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'; import { ref } from 'vue';
import { UploadFile, UploadFiles, UploadInstance } from 'element-plus'; import { UploadFile, UploadFiles, UploadInstance, UploadProps, UploadRawFile } from 'element-plus';
import { ChunkUploadFileData } from '@/api/modules/files'; import { ChunkUploadFileData } 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 { MsgSuccess } from '@/utils/message'; import { MsgSuccess } from '@/utils/message';
interface UploadProps { interface UploadFileProps {
path: string; path: string;
} }
const uploadRef = ref<UploadInstance>(); const uploadRef = ref<UploadInstance>();
const loading = ref(false); const loading = ref(false);
let uploadPrecent = ref(0); let uploadPrecent = ref(0);
let open = ref(false); let open = ref(false);
@ -67,10 +69,11 @@ const fileOnChange = (_uploadFile: UploadFile, uploadFiles: UploadFiles) => {
uploaderFiles.value = uploadFiles; uploaderFiles.value = uploadFiles;
}; };
// const onProcess = (e: any) => { const handleExceed: UploadProps['onExceed'] = (files) => {
// const { loaded, total } = e; uploadRef.value!.clearFiles();
// uploadPrecent.value = ((loaded / total) * 100) | 0; const file = files[0] as UploadRawFile;
// }; uploadRef.value!.handleStart(file);
};
const submit = async () => { const submit = async () => {
loading.value = true; loading.value = true;
@ -109,12 +112,13 @@ const submit = async () => {
} }
if (uploadedChunkCount == chunkCount) { if (uploadedChunkCount == chunkCount) {
loading.value = false; loading.value = false;
uploadRef.value!.clearFiles();
MsgSuccess(i18n.global.t('file.uploadSuccess')); MsgSuccess(i18n.global.t('file.uploadSuccess'));
} }
} }
}; };
const acceptParams = (props: UploadProps) => { const acceptParams = (props: UploadFileProps) => {
path.value = props.path; path.value = props.path;
open.value = true; open.value = true;
uploadPrecent.value = 0; uploadPrecent.value = 0;