web\src\components\selectFile\selectFile.vue删除选择的文件无效。

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,14 +29,18 @@
     name: 'UploadCommon'
   })
 
-  defineProps({
+  const props = defineProps({
     limit: {
       type: Number,
       default: 3
     },
     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
+  }
 </script>

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
   }