Angular多图片上传预览实现问题求助

我明白你的问题了——你现在的代码里复用了同一个FileReader实例，而且Promise在第一个文件加载完成就直接resolve了，这就是为什么多文件时会报错，还只能拿到第一张图的原因。咱们一步步来改：

问题根源 #

• 循环里重复使用同一个FileReader：当你快速循环执行reader.readAsDataURL时，后面的操作会中断前面的，导致InvalidStateError，因为reader还在处理前一个文件时就被重新调用了。
• Promise只resolve了一次：你的Promise在第一个文件的onload里就返回结果了，后面的文件根本没机会执行完。

修正后的代码 #

我们需要为每个文件创建独立的FileReader，并且把每个文件的读取操作包装成Promise，最后用Promise.all等待所有Promise完成，这样就能拿到所有图片的dataURL数组了：

async handleFileInput(event: any) {
  this.filesToUpload = event.target.files;
  // 调用修改后的images方法，传入files数组
  this.fileUrls = await this.images(Array.from(event.target.files));
}

async images(files: File[]) {
  // 为每个文件创建一个读取Promise
  const filePromises = files.map(file => {
    return new Promise<string>((resolve, reject) => {
      const reader = new FileReader();
      reader.onload = (e: any) => {
        resolve(e.target.result);
      };
      reader.onerror = () => {
        reject(reader.error);
      };
      reader.readAsDataURL(file);
    });
  });

  // 等待所有Promise完成，返回结果数组
  return Promise.all(filePromises);
}

关键改动说明 #

• 每个文件对应一个FileReader：避免了复用reader导致的状态冲突，每个文件的读取操作都是独立的。
• 用Array.from把FileList转成数组：方便使用map方法遍历所有文件。
• 收集所有Promise到数组，用Promise.all处理：这样能确保所有文件都读取完成后，一次性返回所有dataURL的数组。
• 添加错误处理：给reader加上onerror回调，处理读取失败的情况，避免Promise一直处于pending状态。

适配你的模板 #

现在fileUrls就是一个包含所有图片dataURL的数组了，直接用你原来的Angular模板就能正常渲染：

<div *ngFor="let fileUrl of fileUrls">
  <img [src]="fileUrl">
</div>

这样修改后，不管上传多少张图片，都能正确预览啦！

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