Angular 4 Base64 上传组件答案

【问题标题】：ANGULAR 4 Base64 Upload ComponentAngular 4 Base64 上传组件
【发布时间】：2018-06-21 08:01:39
【问题描述】：

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

感谢您的帮助。

【问题讨论】：

标签： angular upload base64 components directive

【解决方案1】：

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 })
}

【讨论】：

DataURIToBlob(dataURI: string) 函数非常适合将 base64 图像转换为 Blob 并将其保存在 Amazon S3 存储桶中。

【解决方案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)
  }

您也可以使用此代码制作组件来上传图片

【讨论】：

如果我愿意，你能告诉我如何将这个 base64 解码回文件
如果你想要它在服务器端（即 php）请关注这个stackoverflow.com/a/15153931/7140626 如果你想使用 javascript 来做这个stackoverflow.com/a/38936042/7140626

【解决方案3】：

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

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

不。它超出了 Angular 的范围。你可以use common ways of encoding data into base64。

然后您可以create a control value accessor 负责转换，以使您的代码更加干燥。

【讨论】：