vue-filepond上传ttf/otf字体MIME-Type为空及类型校验失效问题求助

实现思路 #

核心是通过file-validate-type插件提供的自定义类型检测能力，优先通过文件后缀匹配字体文件的MIME类型，覆盖浏览器默认识别为空的异常情况。

具体实现步骤 #

• 第一步：确保已正确安装并引入依赖
  先确认已经安装核心依赖和校验插件：

  npm install vue-filepond filepond-plugin-file-validate-type
  

  在Vue组件中引入相关资源：

  import { FilePond } from 'vue-filepond'
  import 'filepond/dist/filepond.min.css'
  import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type'
  

• 第二步：编写自定义类型检测函数
  在组件methods（Vue2）或者setup作用域（Vue3）中定义检测函数，优先匹配字体文件后缀：

  const detectFileType = (file) => {
    // 提取文件后缀
    const ext = file.name.split('.').pop().toLowerCase()
    // 匹配字体文件类型
    if (ext === 'ttf') return 'font/ttf'
    if (ext === 'otf') return 'font/otf'
    // 其他类型返回原有识别结果
    return file.type
  }
  

• 第三步：配置到vue-filepond组件
  给FilePond组件绑定对应配置，同时在允许的文件类型列表中添加字体MIME：

  <template>
    <FilePond
      :plugins="[FilePondPluginFileValidateType]"
      :accepted-file-types="['font/ttf', 'font/otf', 'image/png', 'image/jpeg']"
      :file-validate-type-detect-type="detectFileType"
    />
  </template>
  

校验逻辑说明 #

配置完成后，插件会优先调用自定义检测函数获取文件类型，再和accepted-file-types列表匹配，即可解决ttf、otf文件因MIME为空导致的校验失效问题。

内容的提问来源于stack exchange，提问作者Nils Mannitz