diff --git a/web/src/components/selectFile/selectFile.vue b/web/src/components/selectFile/selectFile.vue index 8bf0d6dc6b..5c7bd4dbdc 100644 --- a/web/src/components/selectFile/selectFile.vue +++ b/web/src/components/selectFile/selectFile.vue @@ -7,6 +7,7 @@ :on-error="uploadError" :on-success="uploadSuccess" :on-remove="uploadRemove" + :before-upload="checkFile" :show-file-list="true" :limit="limit" :accept="accept" @@ -28,7 +29,7 @@ name: 'UploadCommon' }) - defineProps({ + const props = defineProps({ limit: { type: Number, default: 3 @@ -36,6 +37,10 @@ accept: { type: String, default: '' + }, + fileSize: { + type: Number, + default: 8 } }) @@ -69,7 +74,7 @@ } const uploadRemove = (file) => { - const index = model.value.indexOf(file) + const index = model.value.findIndex(item => item.name === file.name) if (index > -1) { model.value.splice(index, 1) fileList.value = model.value @@ -84,4 +89,39 @@ fullscreenLoading.value = false emits('on-error', err) } + + const checkFile = (file) => { + fullscreenLoading.value = true + const isFileSize = file.size / 1024 / 1024 < props.fileSize // 文件大小 + let pass = true + if (!isFileSize) { + ElMessage.error(`上传文件大小不能超过 ${props.fileSize}MB`) + fullscreenLoading.value = false + pass = false + } + + // 获取accept属性 + const acceptPattern = props.accept + if (acceptPattern) { + // 将accept字符串转换为正则表达式进行验证 + // 例如: "image/*" 需要转换为匹配所有image类型 + const pattern = new RegExp( + acceptPattern + .split(',') + .map(type => type.trim().replace('*', '.*')) + .join('|') + ) + + if (!pattern.test(file.type)) { + ElMessage.error(`请上传${acceptPattern}格式的文件`) + fullscreenLoading.value = false + pass = false + } + } + + + console.log('upload file check result: ', pass) + + return pass + } diff --git a/web/src/view/example/upload/scanUpload.vue b/web/src/view/example/upload/scanUpload.vue index 59845d7e97..fb724f09f1 100644 --- a/web/src/view/example/upload/scanUpload.vue +++ b/web/src/view/example/upload/scanUpload.vue @@ -85,6 +85,7 @@ import { VueCropper } from 'vue-cropper' import { getBaseUrl } from '@/utils/format' import { useRouter } from 'vue-router' import { useUserStore } from "@/pinia"; +import {isImageMime} from "@/utils/image.js"; defineOptions({ name: 'scanUpload' @@ -138,9 +139,9 @@ const fixedRatio = ref(false) // 文件处理 const handleFileChange = (file) => { - const isImage = file.raw.type.includes('image') + const isImage = isImageMime(file.type) if (!isImage) { - ElMessage.error('请选择图片文件') + ElMessage.error('上传图片只能是 jpg、png、svg、webp 格式') return }