从Angular 2将图像上传到数据库

Question

我尝试使用此代码上传图片，一切正常。

 onAvatarSelected(event) { console.log(event.target.files[0]); this.tmp = "tmp"; this.selectedFile = <File>event.target.files[0]; const fd = new FormData(); fd.append("image", this.selectedFile, this.selectedFile.name); this.http .post(this.authservice.getSubDomain() + "/upload", fd) .subscribe(res => { console.log("res",'../../assets/images/directeur/'+res); this.icone = res; this.pathAvatarSuper = res; }); } } 

在我的HtML中

 <div class=" col-xs-12 col-md-12 top_br "> <div class="col-xs-4 col-md-4">Icône</div> <div class="col-xs-8 col-md-8"> <div class="Dr_icon_MD" [style.background-image]="icone!=''?('url('+ icone+')'):('url(../../assets/images/directeur/avatar.png)') " > <input autocomplete="off" class="file_input_Dr" type="file" name="input-file-preview" (change)="onAvatarSelected($event)" #fileInput /> </div> </div> </div> 

我的问题是选择文件时看不到图像：

图片

Answer 1

尝试将CS​​S添加到div.Dr_icon_MD元素中。

div.Dr_icon_MD{
    height: 5rem;
    width: 5rem;
}

Answer 2

首先，您从服务器获取图像。

this.http
  .post(this.authservice.getSubDomain() + "/upload", fd)
  .subscribe(res => {
    console.log("res",'../../assets/images/directeur/'+res);
    this.createImage(res);
  }, error => {
    //set icone to default avatar
  }););

接下来，您阅读图片

createImage(image: Blob) {
   let reader = new FileReader();
   reader.addEventListener("load", () => {
      this.icone = reader.result;
   }, false);

   if (icone) {
      reader.readAsDataURL(image);
   }
}

然后，

<div class="Dr_icon_MD" [style.background-image]="icone">