以角度上传图像文件答案

【问题标题】：image file upload in angular以角度上传图像文件
【发布时间】：2021-11-27 19:28:50
【问题描述】：

我有带有预览的图像文件上传输入，用于显示上传的图像文件。在那里我需要处理一些条件，如下所示：

如果未选择图像文件且数据库没有图像，则显示默认图像，否则根据图像显示
如果数据库有图片在预览中显示，则在选择文件上传后，然后在预览中显示上传的文件

我不知道如何在 img 标签的 src 上处理这些情况。

角度 html 代码

<div class="profile_img">
    <div class="img">
        <img [src]="url?url:defaultUserProfileUrl" alt="Profile Image" class="img-fluid">
    </div>
    <div class="form-group">
        <div class="custom-file">
            <input type="file" id="myfile" name="myfile" [formControl]="profile_image" [(ngModel)]="currentInput"
            accept='image/*' (change)="onFileSelected($event)" />
        </div>
    </div>
</div>

如果存在数据库图像，则显示如下：

<img [src]="userdata.profile_path?userdata.profile_path:defaultUserProfileUrl" alt="Profile Image " class="img-fluid" />

角度 ts 代码

  url: any = [];
  defaultUserProfileUrl:string = 'assets/images/default_user_profile.png';
  onFileSelected(event) {
    console.log(event.target.files[0]);
    this.currentInput = event.target.files[0];

    if (event.target.files && event.target.files[0]) {
      var reader = new FileReader();

      reader.readAsDataURL(event.target.files[0]); // read file as data url

      reader.onload = (event) => {
        this.url = event.target.result;
      };
    }
  }

如何处理图像src 中的多个/嵌套 if else 条件？或者有其他解决方案吗？

请指导和帮助。提前致谢。

【问题讨论】：

标签： angular if-statement file-upload angular-reactive-forms image-upload

【解决方案1】：

你已经定义了一个变量 defaultUserProfileUrl:string = 'assets/images/default_user_profile.png';

现在再定义一个变量为 activeImageUrl = defaultUserProfileUrl:string

并在 ngOnInit() 内部进行后端调用以检索存储在数据库中的图像（如果有）并将 activeImageUrl 替换为检索到的图像。

在html中

<img [src]="activeImageUrl" alt="Profile Image" class="img-fluid">

【讨论】：

好把戏。谢谢:-)