web-dev-qa-db-fra.com

ANGULAR 4 Composant de téléchargement Base64

Je suis nouveau sur Angular. J'utilise Angular 4. Lorsqu'il est nécessaire d'envoyer l'image base64 en tant que membre du modèle à l'API Web. Existe-t-il un composant Angular ou une directive pour qui lierait la base64 audit modèle?

Appréciez et merci pour l'aide.

angularuploadbase64componentsdirective
6
Vijayavel

Vous pouvez télécharger une image et la stocker sous forme codée en base64.

Dans votre template ajoutez ceci

<div class="image-upload">
    <img [src]="imageSrc" style="max-width:300px;max-height:300px"/>
    <input name="imageUrl" type="file" accept="image/*" (change)="handleInputChange($event)" />
</div>

Et cela gérera votre mécanisme de téléchargement à partir de component

  private imageSrc: string = '';

  handleInputChange(e) {
    var file = e.dataTransfer ? e.dataTransfer.files[0] : e.target.files[0];
    var pattern = /image-*/;
    var reader = new FileReader();
    if (!file.type.match(pattern)) {
      alert('invalid format');
      return;
    }
    reader.onload = this._handleReaderLoaded.bind(this);
    reader.readAsDataURL(file);
  }
  _handleReaderLoaded(e) {
    let reader = e.target;
    this.imageSrc = reader.result;
    console.log(this.imageSrc)
  }

Vous pouvez également utiliser ce code pour créer un composant pour télécharger une image

15
Arnaf Aziz

Pour répondre à votre question exacte ...

Existe-t-il un Angular ou directive pour le qui lierait la base64 audit modèle?

Non. C'est hors de portée d'Angular. Vous pouvez tiliser des méthodes courantes d'encodage des données en base64 .

Vous pouvez alors créer un accesseur de valeur de contrôle qui se chargerait de la conversion, pour garder votre code plus SEC.

2
Lazar Ljubenović