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