Angular 2允许用户从本地机器中选择和成像

时间:2016-02-12 05:57:30

标签: angular angular2-template angular2-forms

我对Angular很新。我试图使用Angular 2创建一个简单的Web应用程序,我允许用户从本地计算机中选择和映像。然后我想在<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]);
    }
}

但它根本不起作用。如何使用Angular2读取图像并更新src属性?

我只是想学习Angular。 :)

有更好更简单的方法吗?

3 个答案:

答案 0 :(得分:7)

由于您拥有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在组件中定位图片也是最好的。

答案 1 :(得分:2)

对于那些使用angular:属性结果在EventTarget

类型中不存在的人

你可以通过以下方式解决这个问题:

this.url = event.target['result']

答案 2 :(得分:0)

我的解决方案是:

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