以角度2将图像转换为base64

Question

将图像转换为 angular 2 中的 base64，图像从本地上传。当前正在使用 fileLoadedEvent.target.result。问题是，当我通过 REST 服务将这个 base64 字符串发送到 java 时，它无法对其进行解码。当我使用免费的在线编码器解码器尝试这个 base64 字符串时，我也看不到解码图像。我也尝试使用画布。我没有得到正确的结果。有一件事是确定得到的 base64 字符串不正确，我需要为此添加任何包吗？或者在 angular 2 中是否有任何特定的方法将图像编码为 base64，就像在 angular 1 - angular-base64-upload 包中一样。

请在下面找到我的示例代码

onFileChangeEncodeImageFileAsURL(event:any,imgLogoUpload:any,imageForLogo:any,imageDiv:any)
{
    var filesSelected = imgLogoUpload.files;
    var self = this;
    if (filesSelected.length > 0) {
      var fileToLoad = filesSelected[0];

      //Reading Image file, encode and display
       var  reader: FileReader = new FileReader();
       reader.onloadend = function(fileLoadedEvent:any) {

       //SECOND METHO
       var imgSrcData = fileLoadedEvent.target.result; // <--- data: base64

        var newImage = imageForLogo;
        newImage.src = imgSrcData;
        imageDiv.innerHTML = newImage.outerHTML;

      }
      reader.readAsDataURL(fileToLoad);
    }
}

原文由 lakshmi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

base64 字符串的工作 plunkr

https://plnkr.co/edit/PFfebmnqH0eQR9I92v0G?p=preview

   handleFileSelect(evt){
      var files = evt.target.files;
      var file = files[0];

    if (files && file) {
        var reader = new FileReader();

        reader.onload =this._handleReaderLoaded.bind(this);

        reader.readAsBinaryString(file);
    }
  }

  _handleReaderLoaded(readerEvt) {
     var binaryString = readerEvt.target.result;
            this.base64textString= btoa(binaryString);
            console.log(btoa(binaryString));
    }

原文由 Parth Ghiya 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我修改了 Parth Ghiya 的答案，所以你可以上传 1- 很多图像，它们都作为 base64 编码的字符串存储在一个数组中

base64textString = [];

onUploadChange(evt: any) {
  const file = evt.target.files[0];

  if (file) {
    const reader = new FileReader();

    reader.onload = this.handleReaderLoaded.bind(this);
    reader.readAsBinaryString(file);
  }
}

handleReaderLoaded(e) {
  this.base64textString.push('data:image/png;base64,' + btoa(e.target.result));
}

HTML文件

<input type="file" (change)="onUploadChange($event)" accept=".png, .jpg, .jpeg, .pdf" />
<img *ngFor="let item of base64textString"  src={{item}} alt="" id="img">

原文由 Johansrk 发布，翻译遵循 CC BY-SA 4.0 许可协议