Question

我有以下情况：

<input type="file" name="profilePicture" id="profilePicture" accept="image/*" (change)="onFileSelected($event)" style="display:none"/>
<img *ngIf="!this.profile.profilePic" src="...a static path..." />
<img *ngIf="this.profile.profilePic" [src]="this.profile.profilePic" />

，我想根据img在ngIf标签中显示的两个图像之一上触发输入文件。这意味着我希望在单击图像时打开上载窗口，而无需像往常一样使用“文件”类型的标准输入。我在这里写的代码无法正常工作。有人可以解释一下如何从图片标签触发上传文件并隐藏输入标签吗？

编辑

onFileSelected只是一个处理上传图像并将对象存储在名为profilePicture的临时变量中的函数：

onFileSelected(event) {
  if (event.target.files.length > 0) {
     this.profilePicture = event.target.files[0];
   } else {
    this.profilePicture = undefined;
  }
}

profile是一个对象，其中包含与用户有关的所有信息。

EDIT II

我仅使用一个img标签测试了代码。以下代码也不起作用：

<input type="file" accept="image/*" (change)="onFileSelected($event)" style="display:none"/>
<img [src]="'...the static path...'"/>

编辑III

我的问题与this question有关，该问题解决了我遇到的同样的问题（不幸的是没有帮助）。

Answer 1

使用FileReader类读取文件的内容。 fileReader.result仅在操作完成时可用。

将以下内容添加到您的TS：

imageSource;

onFileSelected(e: Event): void {
  if (e.target.files && e.target.files[0]) {
    const imageFile = e.target.files[0];

    const fileReader = new FileReader();
    fileReader.onload = () => {
      return this.imageSource = fileReader.result;
    };

    fileReader.readAsDataURL(imageFile);
  }
}

并将imageSource绑定到您的img标签：

<img [src]="imageSource || 'static path'" alt="My Profile Image"/>

您只需要添加一个img标签即可在两种情况下都可以使用（如果有可用图片），或者从定义的路径中选择图片。

如何从Angular中的img标签触发输入图像？

1 个答案: