web-dev-qa-db-fra.com

Prévisualisation de l'image avant le téléchargement en mode angulaire 5

.html

  <input type='file' onchange="readURL(this);" />
  <img id="blah" src="http://placehold.it/180" alt="your image" />

.css

img{
  max-width:180px;
}
input[type=file]{
padding:10px;
background:#2d2d2d;}

.js

 function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                document.getElementById('blah').src=e.target.result
            };

            reader.readAsDataURL(input.files[0]);
        }
    }

J'ai ce code pour afficher l'aperçu de l'image avant de le télécharger. Cependant, je travaille avec angular 5, donc j’ai un fichier .ts au lieu de .js. Comment puis-je faire la même chose dans angular 5. Je veux aussi afficher l'image dans tous les navigateurs. S'il vous plaît aider. Merci d'avance.

angularfile-uploadpath
2
Mrinalini Pal

.html

Mettez à jour l'événement attr et le paramètre handler pour input ..__ et utilisez la liaison de données pour l'attribut src. Ce qui suit s'appliquera à src si ce n'est pas une URL nulle, non définie ou codée en dur (' http://placehold.it/180 ')

<input type='file' (change)="readURL($event);" />
<img id="blah" [src]="imageSrc || 'http://placehold.it/180'" alt="your image" />

.ts

Dans le fichier composant ts (classe), vous devriez avoir la propriété imageSrc qui sera utilisée dans view (html) et votre fonction devrait être une méthode de cette classe.

...
imageSrc: string;
...
constructor(...) {...}
...
readURL(event: Event): void {
    if (event.target.files && event.target.files[0]) {
        const file = event.target.files[0];

        const reader = new FileReader();
        reader.onload = e => this.imageSrc = reader.result;

        reader.readAsDataURL(file);
    }
}
13
Coffee-Tea

J'utilise le code ci-dessous pour implémenter l'aperçu de l'image:

onFileChange(event: any) {
this.userFile = event.target.files[0];
this.imageSelected = this.userFile.name;
if (event.target.files && event.target.files[0]) {
  const reader = new FileReader();
  reader.onload = (e: any) => {
    this.imageSrc = e.target.result;
  };
  reader.readAsDataURL(event.target.files[0]);
}}

Ce qui fonctionne très bien et affiche l'aperçu de l'image. Le problème auquel j'ai été confronté à l'origine est que j'ai reçu l'erreur ci-dessous dans les outils de développement Chrome à chaque génération d'un aperçu d'image:

 null 404 GET Error

Tout a bien fonctionné, il n'y a pas d'autres erreurs.

Si j'ai cliqué sur le null: 1, j'ai été dirigé vers le ci-dessous:

 null:1

Après quelques manipulations et des dépannages, j'ai pu trouver la solution que j'ai incluse dans l'édition ci-dessous.

EDIT: Compris. Je n'ai pas eu le || ' http://placehold.it/180 ' "inclus dans le [src] =" sur mon composant.html. Devinez c'est un problème de timing. Trié maintenant. plus d'erreur. 

3
fromage9747

Vous devrez peut-être simplement changer votre javascript function en TypeScript comme ci-dessous.

readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = (e:any) => {
             (<HTMLImageElement>document.getElementById('blah')).src=e.target.result 
             //assuming element with id blah will always be an ImageElement
        };

        reader.readAsDataURL(input.files[0]);
    }
}

Cela devrait être ça.

Mettre à jour

Vous pouvez également définir une propriété et la lier à l'image src et modifier sa valeur en conséquence comme suit:

Dans votre fichier .ts avant constructor, définissez une propriété sur url et définissez sa valeur par défaut sur http://placehold.it/180.

url: string = 'http://placehold.it/180';

Vous pouvez mettre à jour cette propriété dans reader.onload comme ci-dessous:

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]);
  }
}

Votre html va maintenant ressembler à ceci:

<input type='file' (change)="readURL(this);" />
<img id="blah" [src]="url" alt="your image" />
0
Guruprasad Rao

Veuillez changer comme -> this.url = event.target.result;

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]);
    }
}
0
Raj Gopal

Je sais que je suis en retard, mais je viens de rencontrer ce problème à la fois pour l'image et l'audio. Les solutions ci-dessus ont bien fonctionné pour les images mais pas très bien pour l'audio. Tout a finalement fonctionné en utilisant un objet URL au lieu d'un objet FileReader que tout le monde utilise. quelque chose comme ce qui suit

fichier composant.ts ~

imgSrc = 'assets/path/to/default/image.jpeg'

imgFileSelected(event: any) {
  if (event.target.files && event.target.files[0]) {
    this.imgSrc = URL.createObjectURL(event.target.files[0]);
  }
}

Mon composant.html ressemble à ~

<img [src]="imgSrc | sanitizeUrl"> <!-- using a Custom Pipe -->

Enfin, j'ai créé un tuyau personnalisé pour débarrasser la console des avertissements . Mon tuyau est comme suit ~

@Pipe({
  name: 'sanitizerUrl'
})
export class SanitizerUrlPipe implements PipeTransform {

  constructor (
    private sanitize: DomSanitizer
  ) {}

  transform(value: string): SafeUrl {
    return this.sanitize.bypassSecurityTrustUrl(value);
  }
}

Pour voir comment j'ai utilisé cela pour la balise audio, vous pouvez consultez ce lien. Ce ne sont que 2 lignes supplémentaires de code explicite.

0
Joseph Vargas