如何在FilePond中按文件扩展名进行验证？

默认情况下，FilePond的file-validate-type插件依赖MIME类型做文件验证，这种方式确实存在可靠性问题。要实现基于文件扩展名的直接验证，可以通过自定义验证逻辑绕过默认的MIME检测机制，具体实现如下：

核心思路 #

直接提取文件名的扩展名，与预设的允许列表做对比，完全跳过不可靠的MIME类型检测环节。

代码示例 #

FilePond.create(document.querySelector('input[type="file"]'), {
  // 配置允许的文件扩展名（统一小写）
  allowedFileExtensions: ['jpg', 'png', 'pdf', 'docx'],
  
  // 覆盖默认MIME类型检测逻辑，直接返回文件扩展名
  fileValidateTypeDetectType: (source) => {
    return source.name.split('.').pop().toLowerCase();
  },
  
  // 自定义验证规则：检查扩展名是否在允许列表内
  fileValidateTypeValidate: (item) => {
    const allowedExts = item.getOptions('allowedFileExtensions');
    const fileExt = item.file.name.split('.').pop().toLowerCase();
    return allowedExts.includes(fileExt);
  },
  
  // 自定义错误提示文案
  fileValidateTypeLabelExpectedTypes: '仅允许上传以下格式的文件: {allowedFileExtensions}'
});

优势说明 #

这种方案无需维护繁琐的MIME类型映射表，只需更新allowedFileExtensions列表就能快速调整允许的文件格式，逻辑清晰且易于维护。

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