如何獲得在角4

Question

從文件上傳輸入路徑我要上傳圖片和創建它的角4
預覽下面的模板給出：

<div> 
    <input type="file" (onchange)="handleUpload($event)"> 
    <img [src]="Logo" > 
</div 

我想打電話給每當選擇一個文件時，一個功能handleUpload()。該函數將變量Logo的值設置爲所選文件的路徑。我無法獲取路徑，因爲未調用功能handleUpload($event)。
組件類如下：

export class App { 
Logo:string; 

handleUpload(e):void{ 
    this.Logo = e.target.value; 

} 

    constructor() { 

    } 
} 

我不明白什麼是錯我的代碼。 Demo

Answer 1

在angular中，您可以編寫沒有「on」後綴的javascript事件。

變化：

<input type="file" (onchange)="handleUpload($event)"> 

到：

<input type="file" (change)="handleUpload($event)"> 

Answer 2

顯示預覽圖像 - 實施例代碼

<input type="file" (change)="showPreviewImage($event)"> 
<img [src]="localUrl" *ngIf="localUrl" class="imgPlaceholder"> 



localUrl: any[]; 
    showPreviewImage(event: any) { 
     if (event.target.files && event.target.files[0]) { 
      var reader = new FileReader(); 
      reader.onload = (event: any) => { 
       this.localUrl = event.target.result; 
      } 
      reader.readAsDataURL(event.target.files[0]); 
     } 
    } 

Demo and more info