图片上传并显示然后调用api存储答案

【问题标题】：Image upload and show then calling api to store it图片上传并显示然后调用api存储
【发布时间】：2019-11-25 04:47:45
【问题描述】：

我正在使用 Angular 8.0 版。我想使用下面的代码将图像存储在 api 中：

home.component.ts 用于上传和显示图片

  preview2(files) {
    if (files.length === 0)
      return;

    var mimeType = files[0].type;
    if (mimeType.match(/image\/*/) == null) {
      this.message = "Only images are supported.";
      return;
    }

    var reader = new FileReader();
    this.imagePath = files;
    reader.readAsDataURL(files[0]);
    reader.onload = (_event) => {
      this.imgURL2 = reader.result;
      console.log(this.imgURL2);
      console.log(reader);
      this.med_limit2 = true;
    }
  }

上传图片的home.component.html

<input #file2 type="file" class="file_upload" accept='image/*' (change)="preview2(file2.files)" />
                <button class="btn btn-primary" style="width: 50%;background: #0b474a;
                border: none;">Browse</button>
``
home.component.html for showing Image

        <img [src]="imgURL2" *ngIf="imgURL2" class="presc_img" data-toggle="modal" data-target="#exampleModal2"
          style="max-width: 123px; min-width: 99px; margin: 0 14px;box-shadow: 0px 1px 3px 0px grey;
          border-radius: 2px;">

 upload_image() {

    this.presc_service.uploadPrescriptionImage(this.imgURL2).subscribe(res => {
      console.log(res);

      this.image_upload2 = '/' + res['cart_data'][0]
      this.uploadStatus = res['status']

    });
  }

home.component.ts

onSelectFile(event) {
console.log(event);
if (event.target.files && event.target.files[0]) {
this.imageToUpload = event.target.files[0];
console.log(this.imageToUpload);
const reader = new FileReader();
reader.onload = e => this.selectedImage = reader.result.toString();
this.fileName = event.target.files[0].name;
reader.readAsDataURL(this.imageToUpload);
}
}

我得到了使用 api 存储图像的代码，但它没有预览图像

【问题讨论】：

错误是什么？你能在问题中指定它吗
我想用下面这段代码把图片存入api 看不懂！你能解释一下吗？
错误显示-'未定义'@JoelJoseph
其实我想使用 api @PrashantPimpale 存储图像
您想使用 API 发送图片？

标签： javascript angular typescript angular8

【解决方案1】：

我的问题解决了。谢谢你帮助我。

home.component.ts

  onSelectFile(event, files) {

    if (files.length === 0)
      return;

    var mimeType = files[0].type;
    if (mimeType.match(/image\/*/) == null) {
      this.message = "Only images are supported.";
      return;
    }
    console.log(event);

    if (event.target.files && event.target.files[0]) {

      this.imageToUpload = event.target.files[0];
      console.log(this.imageToUpload);
      const reader = new FileReader();
      reader.onload = e => this.selectedImage = reader.result.toString();
      this.fileName = event.target.files[0].name;
      reader.readAsDataURL(this.imageToUpload);


      var reader1 = new FileReader();
      this.imagePath = files;
      reader1.readAsDataURL(files[0]);
      reader1.onload = (_event) => {
        this.imgURL = reader1.result.toString();
        console.log(this.imgURL);
        console.log(reader1);
        this.med_limit1 = true;
      }

    }
  }

【讨论】：