強制轉換document.getElementById以訪問TypeScript中的文件

Question

我對angularjs很陌生。 我無法在線找到解決方案。 我想從文件中讀取文本。 我試圖按照這個例子。 FileReader無法使用AngularJS正確加載文件

但是，由於我使用的是TypeScript，因此我在此行中收到此錯誤

document.getElementById('fileInput').files[0];

錯誤：類型“ HTMLElement”上不存在屬性“文件”。

請建議我如何投射才能使用這些文件。

Answer 1

我發現問題中錯誤的另一種方法是替換：

document.getElementById('fileInput').files[0];

與

var input: any = document.getElementById('fileInput');
var file = input.files[0];

通過將輸入定義為“ any”類型，Typescript編譯器不再引發錯誤。

Answer 2

從該示例中應該可以正常工作，也許您在這里做錯了什么。 但是，您可以像這樣測試您的代碼，將fileChanged()替換為fileChanged(event) ，然后按event.target.files獲取文件

 function fileChanged(event) { var target = event.target || event.srcElement; console.log(target.files); console.log(document.getElementById('fileInput').files); } 

 <div> <input ng-model="csv" onchange="fileChanged(event)" type="file" id="fileInput"/> </div> 

Answer 3

您應該將其轉換為HTMLInputElement 。 該接口的.files字段定義為FileList

/**
 * Returns a FileList object on a file type input object.
 */
readonly files: FileList | null;

interface FileList {
    readonly length: number;
    item(index: number): File;
    [index: number]: File;
}