Vue FilePond判定所有字体文件无效的问题求助

针对Vue3 + FilePond上传字体文件时触发的"Invalid File Type"错误，可通过以下方式解决：

1. 基于文件扩展名验证（推荐） #

浏览器对字体文件的MIME类型返回值存在差异，改用扩展名验证更可靠。修改组件配置如下：

<file-pond
  ref="pond"
  :accepted-file-types="['.ttf', '.woff', '.woff2']"
  :file-validate-type-mode="'extension'"
  <!-- 其他原有属性 -->
/>

将file-validate-type-mode设为'extension'后，插件会直接通过文件名后缀判断类型，避开浏览器MIME类型的不确定性。

2. 自定义类型验证函数 #

强制覆盖插件默认的类型检测逻辑，通过扩展名直接判定：

import { ref } from 'vue'
import vueFilePond from 'vue-filepond'
import 'filepond/dist/filepond.min.css'

const FilePond = vueFilePond()

// 自定义验证函数
const validateFontType = (file) => {
  const allowedExts = ['ttf', 'woff', 'woff2']
  const fileExt = file.name.split('.').pop().toLowerCase()
  return allowedExts.includes(fileExt)
}

// 配置项
const pondOptions = {
  fileValidateTypeValidate: validateFontType
}

在模板中绑定配置：

<file-pond :options="pondOptions" />

3. 调整插件版本 #

当前使用的filepond-plugin-file-validate-type@1.2.6可能存在字体类型检测的已知问题，尝试升级到最新稳定版本：

npm update filepond-plugin-file-validate-type

若升级后问题仍存在，可尝试降级到1.2.5版本测试是否为版本回归问题。

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