ANGULAR 4 Base64上传组件 [英] ANGULAR 4 Base64 Upload Component

问题描述

我是Angular的新手.我正在使用Angular4.在需要将base64图像作为模型成员之一发送到Web api的情况下.是否有Angular组件或指令将Base64绑定到所述模型?

I am new to Angular. I am using Angular 4. Where there is a requirement to send the base64 Image as one of the model member to the web api. Is there a Angular component or directive for the that would bind the base64 to the said model?

感谢并感谢您的帮助.

推荐答案

您可以上传图像并将其存储为base64编码.

You can upload image and store it as base64 encoded.

在您的template中添加此

<div class="image-upload">
    <img [src]="imageSrc" style="max-width:300px;max-height:300px"/>
    <input name="imageUrl" type="file" accept="image/*" (change)="handleInputChange($event)" />
</div> 

这将处理您来自component

  private imageSrc: string = '';

  handleInputChange(e) {
    var file = e.dataTransfer ? e.dataTransfer.files[0] : e.target.files[0];
    var pattern = /image-*/;
    var reader = new FileReader();
    if (!file.type.match(pattern)) {
      alert('invalid format');
      return;
    }
    reader.onload = this._handleReaderLoaded.bind(this);
    reader.readAsDataURL(file);
  }
  _handleReaderLoaded(e) {
    let reader = e.target;
    this.imageSrc = reader.result;
    console.log(this.imageSrc)
  }

您还可以使用此代码制作一个组件来上传图像

You can also use this code to make a component to upload an image

这篇关于ANGULAR 4 Base64上传组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！