如何获取通过<input type="file" accept="image/*">加载文件的实际MIME类型

你可以直接通过DOM中File对象的type属性获取浏览器识别的MIME类型，无需维护扩展名映射表。

基础实现：直接读取File对象的type属性 #

在你的handler函数中，通过<input>的files属性拿到选中的文件，直接访问其type字段即可：

function handler() {
  const selectedFile = this.files[0];
  if (!selectedFile) return;
  
  // 浏览器识别的MIME类型
  const browserDetectedMimeType = selectedFile.type;
  console.log('浏览器识别的MIME类型:', browserDetectedMimeType);
  
  // 后续可直接将该值用于API上传
}

注意事项 #

file.type是浏览器根据文件的扩展名或文件头信息判断的，大多数情况下准确，但存在两种局限性：

• 如果用户修改了文件扩展名（比如把.png改成.jpg），浏览器可能会返回错误的MIME类型
• 部分小众图像格式可能返回空字符串或通用的application/octet-stream

进阶：通过文件签名（魔数）验证真实类型 #

如果需要更高的准确性，可以读取文件的前几个字节（文件签名）来判断真实类型，这是最可靠的方式：

async function getRealMimeType(file) {
  const reader = new FileReader();
  return new Promise((resolve) => {
    reader.onload = function(e) {
      const buffer = new Uint8Array(e.target.result);
      let realType = '';
      
      // 匹配常见图像格式的文件签名
      if (buffer[0] === 0xFF && buffer[1] === 0xD8 && buffer[2] === 0xFF) {
        realType = 'image/jpeg';
      } else if (buffer[0] === 0x89 && buffer[1] === 0x50 && buffer[2] === 0x4E && buffer[3] === 0x47) {
        realType = 'image/png';
      } else if (buffer[0] === 0x47 && buffer[1] === 0x49 && buffer[2] === 0x46 && buffer[3] === 0x38) {
        realType = 'image/gif';
      } else if (buffer[0] === 0x42 && buffer[1] === 0x4D) {
        realType = 'image/bmp';
      }
      // 可根据需求添加WebP、SVG等其他格式的签名判断
      
      // 若无法通过签名识别， fallback 到浏览器识别的类型
      resolve(realType || file.type);
    };
    // 仅读取文件前4字节，避免加载整个文件，提升性能
    reader.readAsArrayBuffer(file.slice(0, 4));
  });
}

// 在handler中调用
async function handler() {
  const selectedFile = this.files[0];
  if (!selectedFile) return;
  
  const realMimeType = await getRealMimeType(selectedFile);
  console.log('真实MIME类型:', realMimeType);
  // 用该值上传到API
}

总结 #

1. 优先使用file.type，这是浏览器直接提供的DOM属性，简单高效
2. 对准确性要求高的场景，结合文件签名验证，避免扩展名篡改带来的错误
3. 小众格式可根据需求扩展签名匹配规则，或在无法识别时 fallback 到扩展名映射

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