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>

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

image

Answer 1

尝试将CSS添加到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">

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

2 个答案: