为何FileList中HEIC/HEIF格式文件的type属性为空？

• 浏览器对File对象的type属性赋值逻辑，依赖操作系统内置注册的MIME类型映射，并不会直接读取文件头内容校验真实格式。HEIC/HEIF属于较新的高效图像格式，旧版Windows（Windows 10 2018年之前的发行版本）、旧版macOS，以及v119之前的Firefox、v80之前的Chrome等老旧浏览器版本，都没有内置该格式对应的image/heic、image/heifMIME类型注册信息，无法匹配到对应的类型标识时，就会直接返回空字符串。
• 若用户操作系统没有安装HEIC/HEIF对应的官方解码器，浏览器会判定该格式为未知格式，直接跳过类型推断步骤，也会导致file.type属性为空。

适配解决方案 #

仅依赖file.type做格式校验不可靠，建议增加两层兜底校验逻辑：

1. 文件名后缀校验：提取文件名称的后缀做第一层快速校验，适配大部分普通场景

// 提取小写的文件后缀
const getFileExt = (filename) => {
  return filename.slice((filename.lastIndexOf('.') - 1 >>> 0) + 2).toLowerCase();
}
const heicExtList = ['heic', 'heif', 'heics', 'heifs'];
const ext = getFileExt(file.name);
if (heicExtList.includes(ext)) {
  // 触发HEIC格式不支持的提示
  this._$inj.globalFac.showAlert(file.name, `Error: File type .${ext} is not supported.`);
  continue;
}

2. 文件头魔数精准校验：如果需要避免伪造后缀的异常场景，可以读取文件前16个字节匹配HEIC的固定魔数标识，确认真实文件格式

async function checkIsHeic(file) {
  const headerBuffer = new Uint8Array(await file.slice(0, 16).arrayBuffer());
  // 匹配HEIC文件头的ftyp标识 + heic标识
  return headerBuffer[8] === 0x66 
    && headerBuffer[9] === 0x74 
    && headerBuffer[10] === 0x79 
    && headerBuffer[11] === 0x70
    && headerBuffer[12] === 0x68
    && headerBuffer[13] === 0x65
    && headerBuffer[14] === 0x69
    && headerBuffer[15] === 0x63;
}

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