浏览器对一些非标准或小众文件格式（比如AsciiDoc的.adoc文件）并没有内置的MIME类型映射，所以上传这类文件时file.type会返回空字符串，直接导致你仅靠file.type的检测逻辑失效。

这里有几个实用的解决方案：

1. 补充文件名后缀检测逻辑 #

既然file.type不可靠，我们可以把文件名后缀检测作为兜底判断。维护一个允许的扩展名列表，当file.type为空或不匹配时，通过后缀来验证文件合法性。

具体代码修改示例 #

先整理好允许的MIME类型和扩展名（和你的枚举对应）：

// 假设你的AttachmentTypeEnum定义如下（可根据实际调整）
enum AttachmentTypeEnum {
  JPEG = 'image/jpeg',
  PNG = 'image/png',
  // 可选：添加adoc的标准MIME类型，部分浏览器可能识别
  ASCIIDOC = 'text/asciidoc'
}

// 维护允许的文件扩展名（统一小写，避免大小写匹配问题）
const ALLOWED_EXTENSIONS = ['jpg', 'jpeg', 'png', 'adoc'];

然后修改你的onFileSelected函数：

onFileSelected(event) {
  Array.from(event.target.files).forEach(file => {
    let isAllowed = false;

    // 优先用MIME类型检测（针对浏览器能识别的文件）
    if (file.type) {
      isAllowed = Object.values(AttachmentTypeEnum).includes(file.type);
    }

    // 如果MIME类型不匹配或为空，切换到文件名后缀检测
    if (!isAllowed) {
      // 获取文件后缀并转为小写
      const fileExt = file.name.split('.').pop()?.toLowerCase();
      // 确保后缀存在且在允许列表内
      isAllowed = !!fileExt && ALLOWED_EXTENSIONS.includes(fileExt);
    }

    if (isAllowed) {
      this.upload(file);
    }
  });
}

2. 前端进阶：内容级验证（可选） #

如果需要更严谨的校验（防止用户修改文件名后缀伪装文件），可以读取文件的前几个字节判断真实类型。不过.adoc是纯文本格式，没有特殊文件头，这种方式对它不太适用，但图片类文件可以用这种方式二次验证。

3. 后端二次校验（必须） #

无论前端做了多少验证，都建议在后端再做一次文件类型校验。前端验证只是提升用户体验，后端才能真正拦截恶意文件上传——后端可以通过读取文件内容、解析文件头等方式确认文件真实类型。

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