xinyin025/smart-admin
1
0
Fork 0
mirror of https://gitee.com/lab1024/smart-admin.git synced 2025-09-17 19:06:39 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

文件上传组件：解决不能点击下载文件的问题、支持多选文件上传、新增超出文件最大数量与超出单文件大小相应的错误提示。

Browse Source
This commit is contained in:
Zhou Mingfa 2024-02-22 17:26:19 +08:00
parent 18c1ac5a5b
commit 1812cb3d6b
2 changed files with 36 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
smart-admin-web/javascript-ant-design-vue3/src/api/support/file-api.js
View File

@ -32,7 +32,7 @@ export const fileApi = {
/** /**
* 下载文件流（根据fileKey） @author 胡克 * 下载文件流（根据fileKey） @author 胡克
*/ */
downLoadFile: (fileName, fileKey) => { downLoadFile: (fileKey) => {
return getDownload('/support/file/downLoad', { fileKey }); return getDownload('/support/file/downLoad', { fileKey });
}, },
}; };

40
smart-admin-web/javascript-ant-design-vue3/src/components/support/file-upload/index.vue
View File

@ -11,6 +11,7 @@
<template> <template>
<div class="clearfix"> <div class="clearfix">
<a-upload <a-upload
multiple
:accept="props.accept" :accept="props.accept"
:before-upload="beforeUpload" :before-upload="beforeUpload"
:customRequest="customRequest" :customRequest="customRequest"
@ -43,12 +44,11 @@
</template> </template>
<script setup> <script setup>
import { computed, ref, watch } from 'vue'; import { computed, ref, watch } from 'vue';
import { message } from 'ant-design-vue'; import { Modal } from 'ant-design-vue';
import { fileApi } from '/src/api/support/file-api'; import { fileApi } from '/src/api/support/file-api';
import { useUserStore } from '/@/store/modules/system/user'; import { useUserStore } from '/@/store/modules/system/user';
import { SmartLoading } from '/@/components/framework/smart-loading'; import { SmartLoading } from '/@/components/framework/smart-loading';
import { FILE_FOLDER_TYPE_ENUM } from '/@/constants/support/file-const'; import { FILE_FOLDER_TYPE_ENUM } from '/@/constants/support/file-const';
import { getDownload } from '/@/lib/axios';
import { smartSentry } from '/@/lib/smart-sentry'; import { smartSentry } from '/@/lib/smart-sentry';
const props = defineProps({ const props = defineProps({
value: String, value: String,
@ -162,14 +162,44 @@
console.log(fileList.value); console.log(fileList.value);
} }
function beforeUpload(file) { function beforeUpload(file, files) {
if (fileList.value.length + files.length > props.maxUploadSize) {
showErrorMsgOnce(`最多支持上传 ${props.maxUploadSize} 个文件哦！`);
return false;
}
if (props.accept) {
const suffixIndex = file.name.lastIndexOf('.');
const fileSuffix = file.name.substring(suffixIndex <= -1 ? 0 : suffixIndex);
if (props.accept.indexOf(fileSuffix) === -1) {
showErrorMsgOnce(`只支持上传 ${props.accept.replaceAll(',', ' ')} 格式的文件`);
return false;
}
}
const isLimitSize = file.size / 1024 / 1024 < props.maxSize; const isLimitSize = file.size / 1024 / 1024 < props.maxSize;
if (!isLimitSize) { if (!isLimitSize) {
return message.error(`上传的文件必须小于${props.maxSize}Mb`); showErrorMsgOnce(`单个文件大小必须小于 ${props.maxSize} Mb`);
} }
return isLimitSize; return isLimitSize;
} }
const showErrorModalFlag = ref(true);
const showErrorMsgOnce = (content) => {
if (showErrorModalFlag.value) {
Modal.error({
title: '提示',
content: content,
okType: 'danger',
centered: true,
onOk() {
showErrorModalFlag.value = true;
},
});
showErrorModalFlag.value = false;
}
};
function handleCancel() { function handleCancel() {
previewVisible.value = false; previewVisible.value = false;
} }
@ -179,7 +209,7 @@
previewUrl.value = file.url || file.preview; previewUrl.value = file.url || file.preview;
previewVisible.value = true; previewVisible.value = true;
} else { } else {
getDownload(file.fileName, file.fileUrl); fileApi.downLoadFile(file.fileKey);
} }
}; };