Angulaire 2 permet à l'utilisateur de choisir et de l'image à partir de leur ordinateur local

Je suis très nouveau pour Angulaires. Je suis en train de faire une simple application web à l'aide Angulaire 2 où j'ai de permettre aux utilisateurs de sélectionner et d'image à partir de leur ordinateur local. Alors je veux afficher cette image dans un <img> tag. Plus tard, d'effectuer des actions sur l'image comme la rotation, changement d'échelle, changement de largeur...etc.

C'est ce que j'ai dans mon composant

@Component({
    selector: 'image-container',
    template: `
        <input type="file" (change)="changeListner($event)" />
        <img id="image"/>
    `,
    directives: [ImageActionsComponent]
})
export class ImageContainerComponent { 
   //make FileReader work with Angular2
   changeListner(event){
        var reader = new FileReader();

        reader.onloaded = function (e) {
            //get loaded data and render thumbnail.
            var src = e.target.result;
            document.getElementById("image").src = src;
        };

        //read the image file as a data URL.
        reader.readAsDataURL(event.target.files[0]);
    }
}

Mais il ne fonctionne pas du tout. Comment lire une image et de la mise à jour de l'attribut src à l'aide de Angular2?

Je suis juste en train d'apprendre Angulaire. 🙂

Est-il mieux et plus facile façon de le faire?

stackoverflow.com/a/34230492/5043867 jetez un oeil ici....cela peut vous aider !

OriginalL'auteur Rahal | 2016-02-12

Il ne fonctionne pas parce que vous avez onloaded nom de l'événement. Il n'y a pas de tels cas, il doit être onload:

import {Component, ElementRef} from 'angular2/core'

@Component({
    selector: 'image-container',
    template: `
        <input type="file" (change)="changeListner($event)" />
        <img class="image" />
    `,
    directives: [ImageActionsComponent]
})
export class ImageContainerComponent {
    constructor(private element: ElementRef) {}

    changeListner(event) {
        var reader = new FileReader();
        var image = this.element.nativeElement.querySelector('.image');

        reader.onload = function(e) {
            var src = e.target.result;
            image.src = src;
        };

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

Aussi il est préférable d'utiliser ElementRef pour localiser l'image au sein d'un composant.

je l'ai essayé dans angulaire 4 mais il est dit que la propriété n'est pas existe sur le type de EventTarget
on dirait une TS en tapant problème
var src = e.cible.résultat; cette ligne est à l'origine de l'erreur. il dit la .le résultat n'est pas existe

OriginalL'auteur dfsq

2

Pour ceux qui sont confrontés à cette erreur angulaire: la propriété n'existe pas sur le type de EventTarget

vous pouvez contourner le problème simplement:
```
this.url = event.target['result']
```
OriginalL'auteur Taha Zgued
1

Que cette réponse états Comment afficher un aperçu de l'image stockée dans le faux chemin Angulaire 2/Tapuscrit pour éviter de propriété "résultat" n'existe pas sur le type "eventtarget'
vous pouvez également déterminer le type de e, tout comme le suivant:
```
reader.onload = function(e: any) {
        var src = e.target.result;
        image.src = src;
    };
```
OriginalL'auteur Mohamed Rozza

Ma solution était:

reader.onload = (e) => {
   image.src=reader.result;
}

OriginalL'auteur Jonatan Potrikus

Vous devez vous connecter pour publier un commentaire.