如何通过编程方式在PrimeNG p-fileupload中预览图片？

问题根源是Angular的DomSanitizer安全机制会将未标记为安全的资源URL添加unsafe:前缀，导致blob格式的图片URL无法正常加载。以下是具体解决步骤：

1. 导入并注入DomSanitizer #

在组件的ts文件中导入Angular的安全工具类，并通过构造函数注入：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnDestroy {
  safeImageUrl: SafeResourceUrl | null = null;

  constructor(private sanitizer: DomSanitizer) { }
}

2. 在onUpload事件中处理blob URL #

获取到上传文件的blob URL后，使用bypassSecurityTrustResourceUrl将其标记为安全资源：

onUpload(event: any) {
  // 从上传事件中获取文件并生成blob URL
  const file = event.files[0];
  const blobUrl = URL.createObjectURL(file);
  // 将blob URL标记为安全资源
  this.safeImageUrl = this.sanitizer.bypassSecurityTrustResourceUrl(blobUrl);
}

3. 在模板中使用安全的URL #

在HTML模板中绑定经过处理的安全URL到img标签的src属性：

<p-fileUpload 
  name="demo[]" 
  url="./upload" 
  (onUpload)="onUpload($event)"
  accept="image/*"
  maxFileSize="1000000">
</p-fileUpload>

<!-- 预览图片 -->
<img [src]="safeImageUrl" *ngIf="safeImageUrl" alt="上传预览" style="max-width: 300px; margin-top: 1rem;">

4. 清理blob URL避免内存泄漏 #

在组件销毁时，记得释放生成的blob URL，防止内存泄漏：

ngOnDestroy() {
  if (this.safeImageUrl) {
    // 将安全类型转换为普通字符串URL后释放
    const originalUrl = this.safeImageUrl as string;
    URL.revokeObjectURL(originalUrl);
  }
}

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