جافاسكريبت - تحويل صورة إلى base64 في أنجولار 2

تحويل صورة إلى base64 في Angular 2، الصورة تم رفعها من الجهاز المحلي. حالياً أستخدم fileLoadedEvent.target.result. المشكلة هي أنه عند إرسال سلسلة base64 هذه عبر خدمات REST إلى جافا، لا تستطيع جافا فك تشفيرها. عند محاولة استخدام هذه السلسلة مع محول ترميز-فك ترميز مجاني على الإنترنت، أيضاً لا أستطيع رؤية الصورة المفككة. لقد جربت استخدام canvas أيضاً. لا أحصل على النتيجة الصحيحة. شيء واحد مؤكد هو أن سلسلة 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);
    }
}

الإجابة رقم 1

عامل plunkr لسلسلة 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));
    }

الإجابة رقم 2

قمت بتعديل إجابة بارت غيا قليلًا، بحيث يمكنك رفع صورة واحدة أو عدة صور، وكلها مخزنة في مصفوفة كسلاسل مشفرة بصيغة 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">