Browse Source

```
feat(FileUploader): 添加文件类型校验功能

- 实现accept属性的文件类型验证,支持MIME类型和文件扩展名校验
- 支持通配符匹配(如image/*)和具体类型匹配(如application/pdf)
- 添加文件扩展名校验(如.jpg、.png)
- 当文件类型不符合要求时显示错误提示并阻止上传
- 更新国际化配置,添加文件类型不允许的提示信息
- 修改批量上传提示文案为仅支持图片文件
```

zhangningning 2 tuần trước cách đây
mục cha
commit
fe3a959249
3 tập tin đã thay đổi với 52 bổ sung2 xóa
  1. 48 0
      src/components/FileUploader.vue
  2. 2 1
      src/locales/en.js
  3. 2 1
      src/locales/zh-CN.js

+ 48 - 0
src/components/FileUploader.vue

@@ -346,6 +346,54 @@ const handleBeforeUpload = (rawFile) => {
       return false
     }
   }
+  // 文件类型校验
+  if (props.accept) {
+    // 解析accept字符串,支持MIME类型和文件扩展名
+    const acceptTypes = props.accept.split(',').map(type => type.trim())
+    let isAcceptable = false
+    
+    // 获取文件的MIME类型和扩展名
+    const fileType = rawFile.type
+    const fileName = rawFile.name
+    const fileExt = fileName.substring(fileName.lastIndexOf('.')).toLowerCase()
+    
+    // 检查是否符合任何一个accept类型
+    for (const acceptType of acceptTypes) {
+      if (acceptType === '') continue
+      
+      // 检查MIME类型(如image/*、application/pdf)
+      if (acceptType.includes('/')) {
+        if (acceptType.endsWith('*')) {
+          // 通配符类型,如image/*
+          const mimePrefix = acceptType.substring(0, acceptType.indexOf('*'))
+          if (fileType.startsWith(mimePrefix)) {
+            isAcceptable = true
+            break
+          }
+        } else {
+          // 具体MIME类型,如application/pdf
+          if (fileType === acceptType) {
+            isAcceptable = true
+            break
+          }
+        }
+      } else if (acceptType.startsWith('.')) {
+        // 检查文件扩展名(如.jpg、.png)
+        if (fileExt === acceptType.toLowerCase()) {
+          isAcceptable = true
+          break
+        }
+      }
+    }
+    
+    if (!isAcceptable) {
+      DGTMessage.error(`${t('common.fileTypeNotAllow')} ${props.accept}`)
+      emit('error', {
+        message: `${t('common.fileTypeNotAllow')} ${props.accept}`
+      })
+      return false
+    }
+  }
 
   // 调用外部before-upload钩子
   return emit('before-upload', rawFile) !== false

+ 2 - 1
src/locales/en.js

@@ -121,6 +121,7 @@ export default {
     notFoundPage:"Sorry, the page you visited cannot be found!",
     addTags: 'New Tag',
     mibiShopPaypSuccessMsg:"Pay Success, Please wait for the seller to ship your order",
+    fileTypeNotAllow:"File type not allowed, only support upload",
   },
   login: {
     smsLogin: 'Captcha Login',
@@ -178,7 +179,7 @@ export default {
     workflowDescription:"Workflow Description",
     placeholderWorkflowDescription:"Please input workflow description",
     placeholderCoverImageUpload:"Please upload cover image",
-    supportBatchUpload:"Support batch upload files, max 5 files",
+    supportBatchUpload:"Support batch upload files, max 5 image files",
     priceSetting:"Price Setting",
     paySetting:"Pay Setting",
     paySettingTip:"Pay (Users need to pay to use)",

+ 2 - 1
src/locales/zh-CN.js

@@ -126,6 +126,7 @@ export default {
     readAndAgree:"我已阅读并同意",
     notFoundPage:"对不起,您访问的页面找不到啦!",
     mibiShopPaypSuccessMsg:"支付成功,请等待商家发货。",
+    fileTypeNotAllow:"文件类型不允许,仅支持上传",
   },
   login: {
     smsLogin: '验证码登录',
@@ -181,7 +182,7 @@ export default {
     workflowDescription:"工作流描述",
     placeholderWorkflowDescription:"请输入工作流描述",
     placeholderCoverImageUpload:"请上传封面图",
-    supportBatchUpload:"支持批量上传文件,最多只能上传 5 份文件",
+    supportBatchUpload:"支持批量上传文件,最多只能上传 5 份图片",
     priceSetting:"价格设置",
     paySetting:"付费设置",
     paySettingTip:"付费(用户需付费后使用)",