feat(Upload): 添加文件大小限制功能并更新开发环境配置

添加 maxSize 属性以限制上传文件大小
新增 onFileChange 事件用于获取上传文件对象
更新开发环境 API 配置
This commit is contained in:
zzp 2026-03-30 09:58:46 +08:00
parent a472659d54
commit 39f617967f
3 changed files with 59 additions and 7 deletions

View File

@ -11,9 +11,9 @@ ENV = development
# VITE_API_URL =http://yxfcfs.natappfree.cc/api/tenant # VITE_API_URL =http://yxfcfs.natappfree.cc/api/tenant
# VITE_API_WS = ws://2pggyb.natappfree.cc/api/websocket # VITE_API_WS = ws://2pggyb.natappfree.cc/api/websocket
# VITE_API_URL = http://123.60.153.169:8104/api/tenant VITE_API_URL = http://123.60.153.169:8104/api/tenant
# VITE_API_WS = ws://123.60.153.169:8104/api/websocket VITE_API_WS = ws://123.60.153.169:8104/api/websocket
# VITE_API_WPSADDIN = http://123.60.153.169:8101/wpsaddin/ VITE_API_WPSADDIN = http://123.60.153.169:8101/wpsaddin/
# VITE_API_URL = https://test.smartjinrui.cn/api/tenant # VITE_API_URL = https://test.smartjinrui.cn/api/tenant
# VITE_API_WS = wss://test.smartjinrui.cn/api/websocket # VITE_API_WS = wss://test.smartjinrui.cn/api/websocket
@ -23,9 +23,9 @@ ENV = development
# VITE_API_WS = wss://aicaibao.cs.com.cn/api/websocket # VITE_API_WS = wss://aicaibao.cs.com.cn/api/websocket
# VITE_API_WPSADDIN = https://aicaibao.cs.com.cn/wpsaddin/ # VITE_API_WPSADDIN = https://aicaibao.cs.com.cn/wpsaddin/
VITE_API_URL = http://10.127.2.206:8104/api/tenant # VITE_API_URL = http://10.127.2.206:8104/api/tenant
VITE_API_WS = ws://10.127.2.206:8104/api/websocket # VITE_API_WS = ws://10.127.2.206:8104/api/websocket
VITE_API_WPSADDIN =http://10.127.2.206:8104/wpsaddin/ # VITE_API_WPSADDIN =http://10.127.2.206:8104/wpsaddin/
# VITE_API_URL = https://aicaibao.cs.com.cn/api/tenant # VITE_API_URL = https://aicaibao.cs.com.cn/api/tenant
# VITE_API_WS = wss://aicaibao.cs.com.cn/api/websocket # VITE_API_WS = wss://aicaibao.cs.com.cn/api/websocket

View File

@ -54,9 +54,11 @@
marginTop: '20px', marginTop: '20px',
}" }"
class="upload" class="upload"
:maxSize="maxSize"
@handleAvatarSuccess="handleAvatarSuccess" @handleAvatarSuccess="handleAvatarSuccess"
@onProgress="onUploadProgress" @onProgress="onUploadProgress"
@onChange="onUploadChange" @onChange="onUploadChange"
@onFileChange="onFileChange"
/> />
</el-form-item> </el-form-item>
<div <div
@ -88,9 +90,11 @@
marginTop: '20px', marginTop: '20px',
}" }"
class="upload" class="upload"
:maxSize="maxSize2"
@handleAvatarSuccess="handleAvatarSuccess2" @handleAvatarSuccess="handleAvatarSuccess2"
@onProgress="onUploadProgress2" @onProgress="onUploadProgress2"
@onChange="onUploadChange2" @onChange="onUploadChange2"
@onFileChange="onFileChange2"
/> />
</el-form-item> </el-form-item>
<div <div
@ -169,6 +173,10 @@ const fileName = ref('');
const fileName2 = ref(''); const fileName2 = ref('');
const canSubmit = ref(true); const canSubmit = ref(true);
const canSubmit2 = ref(true); const canSubmit2 = ref(true);
const uploadedFile = ref(null); // 1
const uploadedFile2 = ref(null); // 2
const maxSize = ref(0); // M0
const maxSize2 = ref(0);
const reportTypeList = ref([ const reportTypeList = ref([
// { // {
@ -297,6 +305,7 @@ function changeReportType(type) {
// value: '5', // value: '5',
// }, // },
]; ];
maxSize.value = 10;
} else { } else {
reportTypeList2.value = [ reportTypeList2.value = [
{ {
@ -304,6 +313,7 @@ function changeReportType(type) {
value: '7', value: '7',
}, },
]; ];
maxSize.value = 0;
} }
} else { } else {
if (queryFrom.value.reportType2 == 7) { if (queryFrom.value.reportType2 == 7) {
@ -325,6 +335,7 @@ function changeReportType(type) {
// value: '5', // value: '5',
// }, // },
]; ];
maxSize2.value = 10;
} else { } else {
reportTypeList.value = [ reportTypeList.value = [
{ {
@ -332,6 +343,7 @@ function changeReportType(type) {
value: '7', value: '7',
}, },
]; ];
maxSize2.value = 0;
} }
} }
} }
@ -340,6 +352,10 @@ function onUploadChange(name: string) {
fileName.value = name; fileName.value = name;
} }
function onFileChange(file: File) {
uploadedFile.value = file;
}
function onUploadProgress(percent: number) { function onUploadProgress(percent: number) {
canSubmit.value = false; canSubmit.value = false;
uploadPercent.value = Number(percent).toFixed(2); uploadPercent.value = Number(percent).toFixed(2);
@ -360,6 +376,10 @@ function onUploadChange2(name: string) {
fileName2.value = name; fileName2.value = name;
} }
function onFileChange2(file: File) {
uploadedFile2.value = file;
}
function onUploadProgress2(percent: number) { function onUploadProgress2(percent: number) {
canSubmit2.value = false; canSubmit2.value = false;
uploadPercent2.value = Number(percent).toFixed(2); uploadPercent2.value = Number(percent).toFixed(2);
@ -381,6 +401,7 @@ async function submit() {
if (loading.value) { if (loading.value) {
return; return;
} }
console.log('🚀 ~ submit ~ queryFrom.value.filePath:', queryFrom.value.filePath);
if (!fileName.value) { if (!fileName.value) {
ElMessage.error('请先上传文件'); ElMessage.error('请先上传文件');
@ -402,6 +423,20 @@ async function submit() {
return; return;
} }
// 10M
if (queryFrom.value.reportType == 7) {
if (uploadedFile.value && uploadedFile.value.size > 10 * 1024 * 1024) {
ElMessage.error('审计报告文件大小不能超过10M');
return;
}
}
if (queryFrom.value.reportType2 == 7) {
if (uploadedFile2.value && uploadedFile2.value.size > 10 * 1024 * 1024) {
ElMessage.error('审计报告文件大小不能超过10M');
return;
}
}
await formRef.value.validate(); await formRef.value.validate();
loading.value = true; loading.value = true;
let subArr = [ let subArr = [
@ -476,6 +511,8 @@ async function hideModal() {
uploadPercent.value = null; uploadPercent.value = null;
dialogVisible.value = false; dialogVisible.value = false;
maxSize.value = 0;
maxSize2.value = 0;
reportTypeList.value = [ reportTypeList.value = [
// { // {

View File

@ -50,8 +50,12 @@ const props = defineProps({
model: { model: {
type: Object, type: Object,
}, },
maxSize: {
type: Number,
default: 10,
},
}); });
const emit = defineEmits(['handleAvatarSuccess', 'onProgress', 'onChange']); const emit = defineEmits(['handleAvatarSuccess', 'onProgress', 'onChange', 'onFileChange']);
const uploadData = ref({}); const uploadData = ref({});
const uploadHeader = ref({ const uploadHeader = ref({
@ -143,6 +147,16 @@ async function onBeforeUpload(res) {
canGo = false; canGo = false;
ElMessage.error('请上传PDF或docx文件'); ElMessage.error('请上传PDF或docx文件');
} }
// maxSize > 0
if (props.maxSize > 0) {
const maxSizeBytes = props.maxSize * 1024 * 1024;
if (res.size > maxSizeBytes) {
canGo = false;
ElMessage.error(`文件大小不能超过${props.maxSize}M`);
}
}
// let { code, data } = await getWordFlag({}); // let { code, data } = await getWordFlag({});
// if (code == 200) { // if (code == 200) {
// console.log('🚀 ~ onBeforeUpload ~ data:', data); // console.log('🚀 ~ onBeforeUpload ~ data:', data);
@ -179,6 +193,7 @@ function onChange(res) {
} else { } else {
showView.value = true; showView.value = true;
} }
emit('onFileChange', res.raw);
} }
function onProgress(res) { function onProgress(res) {