Conversion d'image dans la chaîne base64 à Typescript

J'essaie d'envoyer une chaîne base64 dans votre api de Angular 5

D'abord, je dois le convertir en base64 De l'image , Après avoir vérifié sur Internet et MDN J'ai développé une méthode


OnIDChange/event/ {
var file = event.target.files[0];
var reader = new FileReader//;
reader.onloadend = this.handleReaderLoaded.bind/this, "Id"/;
reader.readAsBinaryString/file/;
}


ET


handleReaderLoaded/readerEvt:any, indicator: string/ {
var binaryString = readerEvt.target.result;
if /indicator == "Id"/ {
this.Model.IDPhoto = btoa/binaryString/;
}
}


Je dois sauver ça base64 dans la propriété de modèle pour le placer dans api

Mais dans la console, il donne une erreur "Impossible de lire la propriété 'result' undefined" sur le

Var. binaryString = readerEvt.target.result;

Comment puis-je convertir l'image dans base64 , S'il y a une autre manière plus appropriée à la place /Tout paquet npm ou quelque chose d'autre, laissez-moi savoir quoi aussi/

Merci d'avance.

Link ot. MDN
https://developer.mozilla.org/ ... nload
Invité:

Emmanuel

Confirmation de:

Vous devez utiliser
readAsDataUrl//

:


function getBase64/event/ {
let me = this;
let file = event.target.files[0];
let reader = new FileReader//;
reader.readAsDataURL/file/;
reader.onload = function // {
//me.modelvalue = reader.result;
console.log/reader.result/;
};
reader.onerror = function /error/ {
console.log/'Error: ', error/;
};
}

Florian

Confirmation de:

Lecture d'image comme base64

:


selectFile/event/{
var files = event.target.files;
var file = files[0];

if /files && file/ {
var reader = new FileReader//;

reader.onload =this.handleFile.bind/this/;

reader.readAsBinaryString/file/;
}
}



handleFile/event/ {
var binaryString = event.target.result;
this.base64textString= btoa/binaryString/;
console.log/btoa/binaryString//;
}


***********************************************************************************


OR

Usage alternatif NPM emballage

:

https://www.npmjs.com/package/alife-file-to-base64
Régler : npm Régler alife-file-to-base64 - Cool

Ajouter Dependecy Dans votre projet

Importer AlifeFileToBase64Module Dans votre projet et activez le module dans la section d'importation


import { AlifeFileToBase64Module } from 'alife-file-to-base64';

@NgModule/{
declarations: [
],
imports: [
AlifeFileToBase64Module
],
providers: [],
bootstrap: [AppComponent]
}/


Syntaxe d'utilisation n'importe où dans votre projet

:


<input "="" $event="" ="onfilechanges="" [="" ]="files" alife-file-to-base64="" filemodel="" onfilechanged="" type="file"/>


onFileChanged

: sera appelé lorsque le fichier est sélectionné par l'utilisateur. Il
contiendra le nom du fichier, la taille du fichier, le type et base64.

fileModel

: Définissez la valeur du composant variable

Alice

Confirmation de:

C'est ce que j'ai fait pour télécharger une photo de profil, que j'ai aussi vérifié moins 512 KB, puis j'ai envoyé cette image à mon API Dans la fonction suivante

j'ai utilisé FileReader// et readAsDataURL// Pour convertir le fichier en base64


/* On Change Profile image*/ 
onProfileChange/event:any/ {
if/event.target.files && event.target.files[0]/ {
if/event.target.files[0].type && event.target.files[0].type.split/'/'/[0] == ["image"] && event.target.files[0].size <= 512000/{
this.file = event.target.files[0];
var reader = new FileReader//;
reader.onload = /event:any/ => {
this.Image = event.target.result;
}
reader.readAsDataURL/event.target.files[0]/;
this.isBrowser = false;
} else {
this.isBrowser = true;
this._toastr.error/"Max image upload size is 500KB only"/;
}
}
}
/*end Of On Change profile Image*/


/*Image api*/
AddImage/event: any/{
let data=new FormData//;
if/this.file/{
data.append/'image',this.file/;
this._db.Post/'api/users/image',data/.subscribe/b=>{
if/b.IsResult/{
this._toastr.success/b.ResultMsg/;
this.getProfileDetail//;
this.isBrowser=true;
}
}/;
}else{
this._toastr.error/"Something went wrong"/;
}
}

Pour répondre aux questions, connectez-vous ou registre