时间戳

首页 > 解决方案 > 如何在 TypeScript 中加载文件

typescript - 如何在 TypeScript 中加载文件

问题描述

我是 Typescript 的新手，有语法问题。我现在想加载用户选择的文件（不使用 JQuery）并将结果打印到控制台。我在 JS 中遵循了一些指南，但没有成功。这就是我到目前为止所拥有的。

索引.html

<input type="file" id="file-input" >

索引.ts

document.getElementById("file-input").addEventListener("change", e => {
  var reader = new FileReader();
  var self = this;
  reader.onload = file => {
      var contents: any = file.target;
      self.text = contents.result; 
  };
  console.log(self.text.toString());
}, false);

这会在控制台报告中出现以下错误：

Uncaught TypeError: Cannot read property 'toString' of undefined
    at HTMLInputElement.<anonymous>

我不太确定如何从缓冲区中获取文本，或者我是否正确设置它。

更新：修改后的当前代码：

document.getElementById("file-input").addEventListener("change", async (e) => {
  var file = (<HTMLInputElement>e.target).files[0];
  var reader = new FileReader();
  reader.onload = file => {
      var contents: any = file.target;
      this.text = contents.result; 
      console.log(this.text.toString());
  };
}, false);

标签： typescript

解决方案

专注于代码

  reader.onload = file => {
      var contents: any = file.target;
      self.text = contents.result; 
  };
  console.log(self.text.toString());

您认为它具有的执行顺序：

  reader.onload = file => {
      var contents: any = file.target;
      self.text = contents.result; // FIRST 
  };
  console.log(self.text.toString()); // SECOND

实际执行顺序：

  reader.onload = file => {
      var contents: any = file.target;
      self.text = contents.result; // SECOND
  };
  console.log(self.text.toString()); // FIRST

因此，您收到错误，因为.text时间self.text.toString运行未分配。

使固定

单程：

  reader.onload = file => {
      var contents: any = file.target;
      self.text = contents.result; // FIRST
      console.log(self.text.toString()); // SECOND 
  };

推荐阅读