file.arrayBuffer() 的浏览器兼容性如何

File.prototype.arrayBuffer() 是现代浏览器中用于将 File（或 Blob）对象异步读取为 ArrayBuffer 的原生方法，相比传统的 FileReader.readAsArrayBuffer() 更简洁、基于 Promise，且性能更好。

---

✅ 浏览器兼容性（截至 2026 年）

浏览器	支持版本	备注
Chrome	≥ 76	2019 年 7 月起支持
Edge	≥ 79	基于 Chromium 后与 Chrome 一致
Firefox	≥ 69	2019 年 9 月起支持
Safari	≥ 14.1	2021 年 4 月起支持（macOS 11.3+ / iOS 14.5+）
iOS Safari	≥ 14.5	同上
Android Browser / WebView	取决于 Chromium 版本（≥76）	大多数现代 Android 设备已支持
Opera	≥ 63	与 Chrome 同步

📌 不支持的环境：

• Internet Explorer（全系列）❌
• Safari ≤ 14.0 ❌
• 旧版移动端浏览器（如 Android 10 以下系统自带浏览器）

---

🔧 如何安全使用？—— 兼容性兜底方案

如果你需要支持 Safari < 14.1 或其他老旧环境，建议使用 特性检测 + 回退到 FileReader：

async function readFileAsArrayBuffer(file) {
  if (typeof file.arrayBuffer === 'function') {
    // 现代浏览器
    return await file.arrayBuffer();
  } else {
    // 降级到 FileReader（适用于 IE10+、旧 Safari 等）
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onload = () => resolve(reader.result);
      reader.onerror = reject;
      reader.readAsArrayBuffer(file);
    });
  }
}

// 使用示例
const buffer = await readFileAsArrayBuffer(myFile);

---

📊 全球使用覆盖率（参考 caniuse.com）

• 全球桌面 + 移动端综合支持率：约 95%+（截至 2026 年初）
• 不支持的主要用户群：
  • 仍在使用 iOS 14.4 及更早版本的 iPhone 用户（占比已很低）
  • 企业内网强制使用 IE 或旧版 Edge 的场景（但 File API 本身在 IE 中就受限）

💡 如果你的产品不需要支持 IE，且最低 iOS 版本 ≥ 14.5，可放心使用 file.arrayBuffer()。

---

✅ 最佳实践建议

1. 新项目优先使用 file.arrayBuffer()：代码更简洁、无回调地狱、内存管理更优。
2. 老项目或需广泛兼容时：封装一个兼容函数（如上所示）。
3. 避免同时使用两者：不要在同一个逻辑中混用，统一抽象层。

---

🆚 对比：file.arrayBuffer() vs FileReader.readAsArrayBuffer()

特性	file.arrayBuffer()	FileReader.readAsArrayBuffer()
异步方式	Promise	事件回调（onload/onerror）
代码简洁性	⭐ 高	较繁琐
内存效率	相同（底层实现一致）	相同
兼容性	现代浏览器	更广（IE10+）
可取消性	❌ 不支持（除非用 AbortController 包装）	❌ 也不支持（FileReader 无 abort 标准方法，但有 .abort()）

注：FileReader.abort() 可中断读取，而 arrayBuffer() 无法中断（但可通过包装 Promise + AbortController 模拟）。

---