FileRead() 将内容存储到类变量中答案

【问题标题】：FileRead() store content into class variableFileRead() 将内容存储到类变量中
【发布时间】：2018-02-24 20:03:28
【问题描述】：

我在 Angular 中有这段代码

import { Component } from '@angular/core';
import {NgForm} from "@angular/forms";

@Component({
  selector: 'app-add-route',
  templateUrl: './add-route.component.html',
  styleUrls: ['./add-route.component.scss']
})
export class AddRouteComponent {
  public fileContent: string;

    constructor() { }

    onSubmit(form: NgForm) {
    }

    getFile(event) {
      let file = event.target.files[0];
      let filename = file.name;
      let result;

      if((filename.split('.').pop()) === 'gpx') {
        let reader = new FileReader();
        reader.readAsText(file);
        this.fileContent = // what should be here?
      }
   }  

}

我想从表单的输入文件（必须是 .gpx 类型）访问文件，获取内容（使用 FileReader()）。将文件内容加载到 类变量 fileContent 后如何存储文件内容？

【问题讨论】：

stackoverflow.com/questions/13729301/…
好吧，这行不通。当我添加 reader.onload = function (e) { result = e.target.result; } this.fileContent = 结果；并打印它以控制台其未定义。是的，结果它存储在 e.target.result 但我的问题是 - 我怎样才能将它存储在类变量中。
我的猜测：reader.onload = (e: any) => { this.fileContent = e.target.result; };
不，这不起作用。它仍然未定义。
您能否添加或显示您用于检查this.fileContent 的代码？您需要在设置变量的同一 { } 块中执行此操作。所以，像这样：reader.onload = (e: any) => { this.fileContent = e.target.result; console.log(this.fileContent); }; 在外面检查总是会返回 undefined。

标签： javascript angular typescript filereader

【解决方案1】：

要在Typescript中获取readAsText函数的结果，需要为FileReader触发的onload事件设置一个箭头函数。

getFile(event) {
  const file = event.target.files[0];
  const filename = file.name;

  if ((filename.split('.').pop()) === 'gpx') {
    const reader = new FileReader();
    reader.readAsText(file);
    reader.onload = (e: any) => {
        this.fileContent = e.target.result;
        console.log(this.fileContent);
    };
  }
}

然后，在箭头函数的主体中，您可以通过e.target.result（e 是事件）访问文件内容。从那里，你可以做你喜欢的数据。

【讨论】：