在TypeScript中加載文件

我是TypeScript和Angular中的新手，我想從本地加載圖像，將此圖像存儲在變量中，並將此數據傳遞給另一個組件。有人有一些例子。我嘗試在JavaScript中使用示例，但不在ts中工作。在html文件中使用這個：在TypeScript中加載文件

<input type="file" name="img" multiple>

我嘗試使用圖像atrribute但有未定義的錯誤。我應該將數組字節傳遞給此文件映像的其他組件或路徑？

來源

2017-08-07 Walter White

因爲TypeScript是javaScript的超集，即使您使用的是TypeScript，也可以直接使用FileReader API。

關於輸入更改事件，您可以綁定您的組件函數以使用(change)來處理事件。 event.target.files是一個FileList，它允許您通過索引ex：files[0]直接訪問文件，並將文件對象發送到FileReader。這裏的問題是，單個FileReader對象一次只能讀取一個文件，因此在更新的示例中，遞歸循環遍歷文件以確保一次只處理一個文件。

結果屬性包含數據作爲代表文件數據的URL作爲base64編碼的字符串。

這裏是採用了棱角分明的2例組件 - 打字稿

import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'images', 
    template: ` 
    <input type="file" name="img" multiple (change)="onChange($event)"> 
    <div *ngFor="let fileUrl of base64Files"> 
     <img [src]="fileUrl" /> 
    </div> 

    ` 
}) 
export class ImagesComponent implements OnInit { 
    public base64Files: string[] = []; 
    private files: any[] = []; 
    private fileReader = new FileReader(); 

    public onChange(event: Event) { 
    let files = event.target['files']; 
    if (event.target['files']) { 
     console.log(event.target['files']); 
     this.readFiles(event.target['files'], 0); 
    } 
    }; 

    private readFiles(files: any[], index: number) { 
    let file = files[index]; 
    this.fileReader.onload =() => { 
     this.base64Files.push(this.fileReader.result); 
     if (files[index + 1]) { 
     this.readFiles(files, index + 1); 
     } else { 
     console.log('loaded all files'); 
     } 
    }; 
    this.fileReader.readAsDataURL(file); 
    } 

}

來源

2017-08-07 13:07:31

讓我知道，如果你需要更多的細節。 –

將文件路徑轉發給其他組件並在其中顯示圖像是否是一個好主意？我讀過我可以從FileList ovject獲取文件對象。 –

Anas Al Hamdan示例工作正常fileReader.result字符串以及如何將其顯示爲圖像;讓預覽= document.querySelector（'img'）; preview.src = fileReader.result;如何顯示多個文件？ –

您正在查找對本地資源的http請求。

訪問https://angular.io/tutorial/toh-pt6#heroes-and-http進行介紹。

將圖像存儲到服務中，您可以將該服務注入其他組件：https://angular.io/tutorial/toh-pt4#creating-a-hero-service。

來源

2017-08-07 13:05:09 kleinech

在TypeScript中加載文件

回答

相關問題