Angular 2让用户从本地机器上选择图像

Question

我对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。 :)

有没有更好更简单的方法来做到这一点？

Answer 1

它不起作用，因为您有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到组件中定位图像。

Answer 2

对于那些谁与角度面对这个错误：属性的结果不存在于类型事件目标

你可以解决它只需：

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

Answer 3

我的解决办法是这样的：

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

Answer 4

由于此答案陈述How to preview picture stored in the fake path in Angular 2/Typescript以避免属性“结果”不存在类型'eventtarget' 您还可以确定电子邮件的类型任何如下：

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