如何将readAsDataURL替换为readAsArrayBuffer优化图片预览性能？

问题背景 #

我有一个支持拖拽多张图片到页面并显示预览的组件，原本用readAsDataURL实现了预览，但选择大量图片时，页面其他交互（如表单填写）会变慢。尝试改用readAsArrayBuffer优化性能，但预览显示灰色方框，无法正常读取图片。

原实现代码（可用但大量图片时卡顿） #

TypeScript 逻辑 #

displayPreviews(files: FileList) {
    for (let i = 0; i < files.length; i++) {
      const file = files.item(i);
      const reader = new FileReader();
      reader.onload = () => {
        const image = reader.result as string;
        this.uploadFileArray.push({
          id: 'id',
          image: image,
        });
      };
      reader.readAsDataURL(file);
    }
}

HTML 模板 #

<li *ngFor="let image of uploadFileArray">
    <div *ngIf="image && image !== ''" [ngStyle]="{'background-image': 'url(' + image.image  + ')'}"></div>
</li>

尝试的优化代码（预览失效） #

detectPhotos(files: FileList) {
    for (let i = 0; i < files.length; i++) {
      const file = files.item(i);
      const reader = new FileReader();
      reader.onload = () => {
        const image = reader.result;
        this.uploadFileArray.push({
          id: 'id',
          image: image,
        });
      };
      reader.readAsArrayBuffer(file);
    }
}

解决方案：正确实现高性能图片预览 #

问题核心：readAsArrayBuffer返回的ArrayBuffer无法直接被background-image识别，且其实我们可以跳过FileReader，直接用Blob URL实现更高效的预览——Blob URL是浏览器内部的文件引用，内存占用远低于Base64格式的Data URL，能大幅降低大量图片时的主线程压力。

优化后的TypeScript代码 #

detectPhotos(files: FileList) {
    Array.from(files).forEach((file, index) => {
      // 拆分任务时间，避免一次性阻塞主线程
      setTimeout(() => {
        // 直接从File对象创建Blob URL，无需读取文件内容
        const blobUrl = URL.createObjectURL(file);
        this.uploadFileArray.push({
          id: `image-${index}`, // 给每个图片设置唯一ID
          image: blobUrl,
        });
      }, index * 50); // 错开50ms处理单张图片，保留主线程响应交互的时间
    });
}

// 组件销毁时必须释放Blob URL，防止内存泄漏
ngOnDestroy() {
  this.uploadFileArray.forEach(item => {
    URL.revokeObjectURL(item.image);
  });
}

关键说明 #

1. Blob URL的优势：无需将文件编码为Base64（体积比原文件大33%），直接引用本地文件，内存占用更低，处理大量图片时性能提升明显。
2. 任务拆分：用setTimeout错开图片处理时间，避免一次性占用主线程导致页面卡顿，确保表单等交互正常响应。
3. 内存泄漏防范：Blob URL不会自动回收，必须在组件销毁时调用URL.revokeObjectURL()释放资源。
4. 无需FileReader：直接用URL.createObjectURL(file)即可生成预览地址，跳过文件读取步骤，代码更简洁高效。

保持原HTML模板不变 #

原HTML模板无需修改，Blob URL可以直接作为url()的参数使用。

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