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
2021-05-21 ajouter un commentaire
Partager ceci

Aucun résultat connexe trouvé

    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/;
    
 };
    
}
    2021-05-21 0 0
    Partager ceci

    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
    2021-05-21 0 0
    Partager ceci

    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"/;
    
 }
    
 }
    2021-05-21 0 0
    Partager ceci
    Pourquoi est-ce complexe? 0 réponses ont été bouchées

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

    Copyright © 2023, All Rights Reserved