ANGULAR 4个Base64上传组件

Question

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

感谢并感谢您的帮助。

Answer 1

回答你的确切问题...

Is there a Angular component or directive for the that would bind the base64 to the said model?

否不在Angular范围内。你可以 .

然后您可以这将负责转换，让您的代码更干。

Answer 2

您可以上传图片并将其存储为 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 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 })
}

ANGULAR 4个Base64上传组件

ANGULAR 4 Base64 Upload Component

angular

upload

base64

components

directive