html - 上传，编辑和替换html和angular 4中的现有文件图像

Question

我对 Angular 很陌生。我的确切问题陈述是 - 我想显示默认图像。如果我单击图像，文件选择器窗口应该打开。当我选择一个图像时，我应该能够看到和编辑图像，最后这个图像应该覆盖默认图像，并将这个图像发送到 API 并显示现有的配置文件图像（如果有）。我想使用 HTML 和 Angular 4 来完成所有这些工作。如果已经存在解决此问题的方法，请指向任何链接。

直到现在我才能够通过这样做打开文件选择器 -

<div>
            <ion-input type="file" style="display: none" ngModel (change)="getFiles($event)"></ion-input>
            <img src="assets/imgs/uploadImage.png" class="form-control" style="width : 20% ; height : 15%" (click)="selectFile()">
        </div>

和

 selectFile(): void {
    let element: HTMLElement = document.querySelector('input[type="file"]') as HTMLElement;
    element.click();
  }

  public async getFiles(event) {
    console.log(event.target.files);
  }

Answer 1

要再次显示个人资料图像，这取决于 api 服务器如何存储您的图像？该api服务器向您发送图像的格式是什么，二进制，云网址......？但是对于选择文件并将其发送到服务器，您可以查看这篇文章... https://www.academind.com/learn/angular/snippets/angular-image-upload-made-easy/