Angular12单表单双图片上传预览同步显示问题如何解决

问题根源 #

当前代码共用了全局的url和files变量存储选中的文件和预览地址，无论选择证件正面还是反面图片，都会覆盖同一个变量值，且两个预览区域的默认显示逻辑都绑定了同一个url，因此会出现两张预览图同步显示同一张图片的问题。

修复步骤 #

1. 拆分独立存储变量 #

修改组件类中的全局变量，为正反面图片分别设置独立的存储字段：

// 替换原来的 files 和 url 变量
frontFile?: File;
backFile?: File;
frontUrl = '';
backUrl = '';

2. 修改文件选择逻辑 #

分别调整正反面的文件选择回调方法，将选中的文件和预览地址赋值给对应变量：

onSelectFrontFile(event: any) {
  if (event.target.files && event.target.files[0]) {
    const reader = new FileReader();
    this.frontFile = event.target.files[0];
    reader.readAsDataURL(this.frontFile);
    reader.onload = (e: any) => {
      this.frontUrl = e.target.result;
    }
    // 可选：将文件对象写入表单控件，方便提交时直接取值
    this.licenceInfoForm.get('front_page')?.setValue(this.frontFile);
  }
}

onSelectBackFile(event: any) {
  if (event.target.files && event.target.files[0]) {
    const reader = new FileReader();
    this.backFile = event.target.files[0];
    reader.readAsDataURL(this.backFile);
    reader.onload = (e: any) => {
      this.backUrl = e.target.result;
    }
    // 可选：将文件对象写入表单控件，方便提交时直接取值
    this.licenceInfoForm.get('back_page')?.setValue(this.backFile);
  }
}

3. 修改模板预览绑定 #

调整两个预览图片的src绑定逻辑，分别关联对应的预览变量：

• 证件正面预览图：

<img class="profile-user-img img-fluid img-circle" 
     [src]="employee.front_page ? licImageDirectoryPath+employee.front_page : frontUrl || 'assets/img/no-image.png'" 
     alt="证件正面" 
     onerror="this.src='assets/img/no-image.png'" 
     style="height:150px; width:150px">

• 证件反面预览图：

<img class="profile-user-img img-fluid img-circle" 
     [src]="employee.back_page ? licImageDirectoryPath+employee.back_page : backUrl || 'assets/img/no-image.png'" 
     alt="证件反面" 
     onerror="this.src='assets/img/no-image.png'" 
     style="height:150px; width:150px">

提交说明 #

后续提交表单时，可直接取frontFile和backFile两个变量，或者从表单控件中取值，分别上传到对应的存储地址即可。

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