ANGULAR 4 Base64 上传组件

Question

我是Angular的新手。我正在使用 Angular 4。需要将 base64 映像作为模型成员之一发送到 Web API 的地方。是否有将base64绑定到所述模型的Angular组件或指令？

感谢您的帮助。

Answer 1

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

在您的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)
  }

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

Answer 2

要回答您的确切问题...

是否有将base64绑定到所述模型的Angular组件或指令？

不。这超出了Angular的范围。可以使用将数据编码为 base64 的常用方法。

然后，可以创建一个控件值访问器来处理转换，以使代码更加干燥。

Answer 3

imgBase64 = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCA..." //your image base64 data url
onSubmit(){
    const file = this.DataURIToBlob(this.imgBase64)
    const formData = new FormData();
    formData.append('upload', file, 'image.jpg')
    formData.append('profile_id', this.profile_id) //other param
    formData.append('path', 'temp/') //other param
    this.dataService.setProfileImage(formData). //send formData in body
}
DataURIToBlob(dataURI: string) {
    const splitDataURI = dataURI.split(',')
    const byteString = splitDataURI[0].indexOf('base64') >= 0 ? atob(splitDataURI[1]) : decodeURI(splitDataURI[1])
    const mimeString = splitDataURI[0].split(':')[1].split(';')[0]
        
    const ia = new Uint8Array(byteString.length)
    for (let i = 0; i < byteString.length; i++)
        ia[i] = byteString.charCodeAt(i)
      
        return new Blob([ia], { type: mimeString })
}