Angular 2 позволяет пользователю выбирать изображение со своего локального компьютера.

Я очень новичок в Angular. Я пытаюсь создать простое веб-приложение с использованием Angular 2, где я позволяю пользователям выбирать и отображать изображения со своего локального компьютера. Затем я хочу отобразить это изображение в теге <img>. Позже выполните действия с изображением, такие как поворот, изменение масштаба, изменение ширины и т. д.

Это то, что у меня есть в моем компоненте

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

Но это вообще не работает. Как прочитать изображение и обновить атрибут src с помощью Angular2?

Я просто пытаюсь изучить Angular. :)

Есть ли лучший и простой способ сделать это?


angular angular2-forms angular2-template
person Rahal    schedule 12.02.2016    source источник
comment
stackoverflow.com/a/34230492/5043867 посмотрите здесь.... это может вам помочь!   -  person Pardeep Jain    schedule 12.02.2016

Ответы (4)


arrow_upward
7
arrow_downward

Это не работает, потому что у вас есть имя события onloaded. Такого события нет, должно быть 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]);
    }
}

Также лучше использовать ElementRef для поиска изображения внутри компонента.

person dfsq    schedule 12.02.2016
comment
я попробовал это в angular 4, но он говорит, что результат свойства не существует для типа EventTarget - person Anil Shrestha; 02.09.2017
comment
@AnilShrestha звучит как проблема с набором текста в TS - person dfsq; 02.09.2017
comment
var src = e.target.result; эта строка вызывает ошибку. он говорит, что .result не существует - person Anil Shrestha; 03.09.2017

arrow_upward
2
arrow_downward

Для тех, кто столкнулся с этой ошибкой с угловым: результат свойства не существует для типа EventTarget

вы можете обойти это просто:

this.url = event.target['result']
person Taha Zgued    schedule 20.09.2017

arrow_upward
1
arrow_downward

Поскольку в этом ответе указано Как изображение предварительного просмотра, хранящееся в поддельном пути в Angular 2/Typescript, чтобы избежать того, что свойство «результат» не существует для типа «цель события», вы также можете определить тип e как любой из следующих:

reader.onload = function(e: any) {
        var src = e.target.result;
        image.src = src;
    };
person Mohamed Rozza    schedule 28.11.2017

arrow_upward
0
arrow_downward

Мое решение было таким:

reader.onload = (e) => {
   image.src=reader.result;
}
person Jonatan Potrikus    schedule 22.10.2017