如何以角度更改个人资料图片？答案

【问题标题】：How to change profile picture in angular?如何以角度更改个人资料图片？
【发布时间】：2019-05-24 11:00:06
【问题描述】：

我正在制作 Angular 6 应用程序，我正在使用图像上传选项，

HTML：

<img [src]="url ? url : 'https://www.w3schools.com/howto/img_avatar.png'"> <br/>
<input type='file' (change)="onSelectFile($event)">

Ts：

  onSelectFile(event) {
    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) => { // called once readAsDataURL is completed
        this.url = event.target.result;
      }
    }
  }

工作堆栈闪电战： https://stackblitz.com/edit/angular-file-upload-preview-ekyhgh

在这里我所做的事情是html input file，它将选择的文件显示为文本，但我需要在点击配置文件图像时让它，该文件夹需要从本地显示（这将出现在点击选择的文件按钮上正常）..

为了混淆我有一个我需要的链接是https://codepen.io/anon/pen/PXjaJv

在这里，您可以在将鼠标悬停在图像上时看到文本显示为 Drag your photo here or browse your computer.. （相同的文本出现在给定的链接默认值中，因为那里没有图片，但我需要悬停只是因为我有头像图像已经如此，悬停在我需要显示更改个人资料图片的此文本的任何图像上）..

忽略在此链接 https://codepen.io/anon/pen/PXjaJv 中裁剪和删除图像，但我唯一需要的是 UI 更改，例如悬停时制作覆盖文本，然后单击文本可浏览计算机中的图片更改然后使用删除选项更改个人资料图片，这将返回头像图像本身（如果已删除）..

请帮助我在没有 jquery 的情况下使用纯 angular/typescript 方式获得结果。

【问题讨论】：

标签： javascript html css angular typescript

【解决方案1】：

您应该使用具有正确for 属性的label 标记。 for 属性必须包含id 的input 标签。

看例子。

<label class="hoverable" for="fileInput">
  <img [src]="url ? url : 'https://www.w3schools.com/howto/img_avatar.png'"> 
  <div class="hover-text">Choose file</div>
  <div class="background"></div>
</label>
<br/>
<input id="fileInput" type='file' (change)="onSelectFile($event)">
<button *ngIf="url" (click)="delete()" >delete</button>

stackblitz 上的示例。

【讨论】：

感谢您的解决方案，但我不应该让<input id="fileInput" type='file' (change)="onSelectFile($event)"> 单独显示Choose File 文本.. 只有单击悬停文本才能浏览.. 我需要相同的 UI LIKE @ 987654322@ 在哪里找不到名为 choose file 的文本和笨拙的按钮..
@undefined 可以通过css隐藏input标签。我已经更新了 stackblitz。
@undefined html 示例中的删除按钮在哪里？我添加了简单的删除按钮。请检查。
@undefined 这是另一个问题。您没有提到文本样式。

【解决方案2】：

虽然上面的答案是正确的，但我想补充一下，

.css

p {
  font-family: Lato;
}

.image-container {
  position: relative;
  display: inline-block;
  text-align: center;
}

img {
  height: 200px;
  width: 200px;
  border: 5px solid #000;
  border-radius: 50%;
}

.select-profile-picture {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.message {
  position: absolute;
  width: 90%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 100%);
  transition: all 1s;
  opacity: 0;
}

.image-container:hover .message {
  transform: translate(-50%, -50%);
  opacity: 1;
}

.html

<div class="image-container">
 <img [src]="url ? url : 'https://www.w3schools.com/howto/img_avatar.png'" class=""> <br/>
 <input type='file' (change)="onSelectFile($event)" class="select-profile-picture">
 <span class="message">Tap here to select your picture</span>
</div>

【讨论】：