javascript - Chuyển đổi hình ảnh sang base64 trong angular 2

Chuyển đổi hình ảnh sang base64 trong Angular 2, hình ảnh được tải lên từ máy local. Hiện tại tôi đang sử dụng fileLoadedEvent.target.result. Vấn đề là, khi tôi gửi chuỗi base64 này qua các dịch vụ REST đến Java, nó không thể giải mã được. Khi tôi thử chuỗi base64 này với bộ mã hóa-giải mã trực tuyến miễn phí, tôi cũng không thể thấy hình ảnh được giải mã. Tôi đã thử dùng canvas nhưng cũng không có kết quả đúng. Một điều chắc chắn là chuỗi base64 tôi nhận được không đúng, liệu tôi có cần thêm gói nào cho việc này không? Hoặc trong Angular 2 có cách đặc biệt nào để mã hóa hình ảnh sang base64 như trong Angular 1 - gói angular-base64-upload không?

Vui lòng xem bên dưới mã mẫu của tôi

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

Câu trả lời #1

Plunkr hoạt động cho chuỗi base64

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

Câu trả lời #2

Tôi đã chỉnh sửa câu trả lời của Parth Ghiya một chút, vì vậy bạn có thể tải lên từ 1 đến nhiều hình ảnh, và tất cả chúng đều được lưu trong một mảng dưới dạng chuỗi mã hóa 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));
}

tệp HTML

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