Angular使用FileReader结合Promise实现多图预览无返回值问题求解

问题原因 #

你遇到的问题由3个常见错误共同导致：

• FileReader读取方法不匹配：当前调用的readAsArrayBuffer()返回的是二进制数组，无法直接作为img标签的src使用，需要输出base64格式的话要改用readAsDataURL()方法，该方法会直接返回带data:image/xxx;base64,前缀的合法图片地址。
• 模板直接调用异步方法触发重复执行：Angular的变更检测运行时会反复执行模板内绑定的readFile(file)方法，每次都会生成新的Promise实例，async管道会重复订阅，导致文件反复读取、渲染异常。
• 缺少Angular安全校验放行：动态生成的data协议URL会被Angular默认的安全策略标记为不安全，直接赋值会被拦截无法加载。

修复方案 #

推荐用预读取+缓存的方案，性能更稳定：

1. 组件TS代码修改

import { Component } from '@angular/core';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';

@Component({
  // 你的原有组件配置
})
export class YourComponent {
  filelist: File[] = [];
  // 存储预生成的预览安全地址
  previewUrls: SafeUrl[] = [];

  constructor(private sanitizer: DomSanitizer) {}

  // 在你获取到filelist的时机调用，比如文件选择事件的回调
  loadPreviewUrls() {
    this.previewUrls = [];
    for (const file of this.filelist) {
      this.readFileToBase64(file).then(base64Url => {
        // 放行安全校验
        const safeUrl = this.sanitizer.bypassSecurityTrustUrl(base64Url as string);
        this.previewUrls.push(safeUrl);
      })
    }
  }

  private readFileToBase64(file: File): Promise<string | ArrayBuffer | null> {
    return new Promise((resolve) => {
      const reader = new FileReader();
      reader.onload = () => resolve(reader.result);
      // 改用读base64的方法
      reader.readAsDataURL(file);
    })
  }
}

2. 模板修改

直接遍历预生成的预览地址，避免模板内调用异步方法：

<div *ngFor="let url of previewUrls">
  <img [src]="url">
</div>

如果确实需要保留遍历filelist的写法，可以加层缓存避免重复读取：

private previewCache = new Map<File, SafeUrl>();

async getFilePreview(file: File): Promise<SafeUrl> {
  if (this.previewCache.has(file)) {
    return this.previewCache.get(file)!;
  }
  const base64 = await this.readFileToBase64(file);
  const safeUrl = this.sanitizer.bypassSecurityTrustUrl(base64 as string);
  this.previewCache.set(file, safeUrl);
  return safeUrl;
}

模板对应调整即可：

<div *ngFor="let file of filelist">
  <img [src]="getFilePreview(file) | async">
</div>

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