Angular 从“角度材质文件选择”中读取文件

我正在使用材质选择一个文件。这是：

<label for="uploadPicture" class="upload-file">
    <mat-icon>add_a_photo</mat-icon>
</label>
<input type="file"
       id="uploadPicture"
       class="hidden-input"
       accept="text/kml, .kml"
       (change)="selectFile($event.target.files[0])">

<button mat-button (click)="onCancel()">Cancel</button>
<button mat-button (click)="onOk()" [disabled]="!selected">Ok</button>

我试图找到这个类的文档，但似乎找不到。如果有一个文件的typescript定义，难道不应该有一种typescript方式来读取它吗？一切都使用node或javascript

更新：

以下是我最终使用的代码：

const fileReader = new FileReader();
let text: string;
fileReader.onload = e => {
  text = fileReader.result;
  console.log('result', text);
};
fileReader.readAsText(file);

将fileInput添加到模板中的HTML输入元素

---

选民：请问这个问题怎么了？看看这个：我做了一些改变。请参阅我的问题以了解更多详细信息。我看到您正在尝试加载文本文件，但由于id=uploadPicture，我误解了这一点。您使用fileReader.readAsTextfilename是正确的。我相应地更新了我的答案。哦，是的。还没有改变。对不起，误会了。

const fileReader = new FileReader();
let text: string;
fileReader.onload = e => {
  text = fileReader.result;
  console.log('result', text);
};
fileReader.readAsText(file);

@ViewChild('fileInput') fileInputRef: ElementRef; ngOnInit() { const fileInput: HTMLInputElement = this.fileInputRef.nativeElement; this.fileInputRef.nativeElement.addEventListener('change', c => this.loadDataFile(fileInput.files[0])); } loadDataFile(file: File): void { const fileReader= new FileReader(); fileReader.onload = e => { // do something with fileReader.result, that contains the data }; fileReader.readAsText(filename); }