Vue.js中Vue Formulate多类型文件上传MIME校验配置问题

问题原因 #

当前代码中mime校验规则仅配置了application/pdf类型，因此仅PDF文件可通过校验属于预期表现。Word、Excel类Office文件校验失效，核心是两个常见配置错误：

• 未在mime规则中补充Office文件对应的完整MIME类型
• 混淆了accept属性和校验规则的作用：accept仅控制文件选择弹窗的默认过滤项，不参与表单提交前的校验逻辑，无法作为拦截依据

常见办公文件对应MIME类型参考 #

• PDF(.pdf)：application/pdf
• Word 97-2003(.doc)：application/msword
• Word 新版(.docx)：application/vnd.openxmlformats-officedocument.wordprocessingml.document
• Excel 97-2003(.xls)：application/vnd.ms-excel
• Excel 新版(.xlsx)：application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
• PPT 97-2003(.ppt)：application/vnd.ms-powerpoint
• PPT 新版(.pptx)：application/vnd.openxmlformats-officedocument.presentationml.presentation

基础正确配置 #

直接在mime规则后用逗号拼接所有允许的MIME类型即可，以允许PDF、doc、docx为例：

<FormulateInput
  type="file"
  input-class="formulate-form-control"
  name="filename"
  id="fileid"
  validation-name="filecheck"
  accept=".pdf,.doc,.docx"
  validation="mime:application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
/>

兼容兜底方案 #

部分浏览器、操作系统会篡改Office文件的MIME返回值，仅靠MIME校验可能出现误拦截，可搭配自定义扩展名校验规则兜底：

1. 先在Vue Formulate初始化时注册自定义扩展名校验规则：

import Vue from 'vue'
import VueFormulate from '@braid/vue-formulate'

Vue.use(VueFormulate, {
  rules: {
    allowedExt: ({ value }, ...exts) => {
      // 未上传文件时跳过该校验，由required规则控制必填
      if (!value || !value.length) return true
      // 单文件校验逻辑，多文件场景可遍历value数组逐个判断
      const fileExt = value[0].name.split('.').pop().toLowerCase()
      return exts.includes(fileExt)
    }
  },
  messages: {
    allowedExt: '文件格式不符合要求，请上传指定类型的文件'
  }
})

2. 在组件中组合MIME校验和扩展名校验，用|分隔多个校验规则：

<FormulateInput
  type="file"
  input-class="formulate-form-control"
  name="filename"
  id="fileid"
  validation-name="filecheck"
  accept=".pdf,.doc,.docx"
  validation="mime:application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document|allowedExt:pdf,doc,docx"
/>

注意：不要依赖accept属性做安全拦截，用户可在文件选择弹窗手动切换为「所有文件」绕过该限制，所有格式校验必须通过validation属性配置的规则完成。

内容的提问来源于stack exchange，提问作者Amit Gupta