FileRead() 将内容存储到 class 变量中

Question

我在 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()）。如何将文件内容加载到 class 变量 fileContent?

中

Answer 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 是事件）访问文件内容。从那里，你可以做你喜欢的数据。

FileRead() 将内容存储到 class 变量中

FileRead() store content into class variable

javascript

filereader

typescript

angular