转换document.getElementById以访问TypeScript中的文件

Question

我对angularjs很新。我无法在线找到解决方案。我想从文件中读取文本。我试图效仿这个例子。 FileReader not loading file properly using AngularJS

但是，由于我使用的是TypeScript，因此我收到此行的错误

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

错误：“HTMLElement”类型中不存在属性“文件”。

请建议我如何使用这些文件。

Answer 1

从这个例子来看，这应该可以正常工作，也许你在那里做错了。但是，您可以像这样测试您的代码，用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 2

我发现问题中的错误的另一种方法是替换：

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

同

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

通过将输入定义为类型“any”，Typescript编译器不再引发错误。

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