web-dev-qa-db-fra.com

Comment afficher une image à l'aide de TypeScript et Angular 4

Je suis très nouveau pour TypeScript et le développement Web en général, donc je suis désolé si mon code est terrible. Quoi qu'il en soit, je rencontre un problème d'affichage d'une "image de prévisualisation" pour un téléchargement de photo de profil. J'utilise ng2-file-upload pour télécharger mon image sur le serveur et cette partie fonctionne correctement. Avant de cliquer sur le bouton de téléchargement, je souhaite afficher l'image sélectionnée sur la page immédiatement après sa sélection. Actuellement, j'essaie d'afficher l'image en récupérant la propriété src à partir de HTMLImageElement mais la propriété src semble être vide. 

import { Component, OnInit } from '@angular/core';
import {  FileUploader } from 'ng2-file-upload/ng2-file-upload';

const URL = 'http://localhost:4200/api/upload';

@Component({
  selector: 'app-view-profile',
  templateUrl: './view-profile.component.html',
  styleUrls: ['./view-profile.component.css']
})
export class ViewProfileComponent implements OnInit {

  constructor() { }
  public uploader: FileUploader = new FileUploader({url: URL, itemAlias: 'newProfilePicture'});
  title: string;
  previewImage: any;
  tempImage: any;
  source: string;

  imagePreview(input) 
  {
      document.getElementById("previewImage").style.display="block";
      
        console.log("Image is selected")
        this.previewImage = document.getElementById("previewImage");
        console.log(this.previewImage);
        
        this.source = (<HTMLImageElement>document.getElementById('previewImage')).src
        console.log("Image Source: " + this.source + " Should be inbetween here");
        
      
      //var reader = new FileReader();
        
        //console.log(this.previewImage);
      
  }

  ngOnInit() {
  	this.title = 'View or Update Your Profile';
  	this.uploader.onAfterAddingFile = (file)=> {file.withCredentials = false;};
  	this.uploader.onCompleteItem = (item:any, response:any, status:any, headers:any) => {
        console.log("ImageUpload:uploaded:", item, status, response);
    //this.imagePreview();


    };
  }


}

Et voici mon HTML

<div class="container">
    <h1>{{title}}</h1>

    <div>

        <input type="file" id="previewImage" (change)="imagePreview(this);" name="newProfilePicture" ng2FileSelect [uploader] ="uploader" />
        <button type="button" class="btn btn-success btn-s" (click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length">
          Upload Your File
        </button>
    </div>
</div>
html5angulartypescript
6
Kenny Ho

Vous réalisez ceci par cette simple fonction:

Modèle :

<img [src]="url" height="200"> <br/>
<input type='file' (change)="onSelectFile($event)">

Composant:

onSelectFile(event) { // called each time file input changes
    if (event.target.files && event.target.files[0]) {
      var reader = new FileReader();

      reader.readAsDataURL(event.target.files[0]); // read file as data url

      reader.onload = (event) => { // called once readAsDataURL is completed
        this.url = event.target.result;
      }
    }
}

Voici l'exemple de travail, s'il vous plaît vérifier ceci:

DEMO DE TRAVAIL

15
Vivek Doshi

Modèle : 

<input type='file' (change)="readUrl($event)">
<img [src]="url">

Composant:

 readUrl(event:any) {
      if (event.target.files && event.target.files[0]) {
          var reader = new FileReader();

          reader.onload = (event:any) => {
              this.url = event.target.result;
          }

          reader.readAsDataURL(event.target.files[0]);
      }
 }

Je l'ai essayé et cela fonctionne sans erreur.

1
Iron shield