web-dev-qa-db-fra.com

Conversion de l'image en chaîne base64 en caractères typographiques

J'essaie de poster une chaîne base64 sur mon api depuis Angular 5

Je dois d'abord le convertir en base64 à partir 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 stocker cette base64 dans la propriété modèle pour l'afficher dans api 

Mais dans la console, l'erreur "Impossible de lire la propriété 'résultat' de non défini" sur 

var binaryString = readerEvt.target.result;

Comment puis-je convertir une image en base64, s'il existe un autre moyen plus approprié au lieu de cela (tout paquet npm ou autre chose, alors laissez-moi savoir cela aussi)

Merci d'avance .

Référence de MDN MDN Link

angulartypescriptangular5
2
Tanwer

Vous devriez avoir besoin d'utiliser la méthode '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);
   };
}
2
Suresh Kumar Ariya

Lit l'image en 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));
    }


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

OU 

Autre utilisation NPM packge:  

https://www.npmjs.com/package/alife-file-to-base64

installer: npm installer alife-file-to-base64 --save

Ajouter la dépendance à votre projet

Importer AlifeFileToBase64Module dans votre projet et inclure le module dans la section des importations

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

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

Syntaxe à utiliser n’importe où dans votre projet: 

<input type="file" alife-file-to-base64 (onFileChanged)="onFileChanges($event)" [(fileModel)]="files" />
  • onFileChanged : sera appelé lorsque le fichier sera sélectionné par l'utilisateur. Il Contiendra le nom de fichier, la taille du fichier, le type et le base64.
  • fileModel : Pour définir la valeur de la variable composant
0
Dinesh Ghule

C’est quelque chose que j’ai fait pour télécharger une photo de profil, j’ai également vérifié la taille inférieure à 512 Ko, puis j’ai posté cette image sur 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");
        }
    }
0
Suhas Mandumale