Прочитать файл из файла выбора угловых материалов

Question

Я использую Материал, чтобы выбрать файл. Вот оно:

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

Кажется, это работает нормально, и мой метод 'selectFile' вызывается правильно.

Проблема в том, что теперь? Мне нужно прочитать этот файл и разобрать его как файл XML.

Это экземпляр объекта Typescript File. Вот определение в lib.dom.d.ts

interface File extends Blob {
    readonly lastModifiedDate: any;
    readonly name: string;
    readonly webkitRelativePath: string;
}

Я пытался найти документацию для этого класса, но не могу ее найти. Если есть определение машинописного файла, разве не должно быть машинописного способа его чтения? Все использует узел или JavaScript.

Обновление:

Вот код, который я использовал в итоге:

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

Answer 1

1. добавьте #fileInput к элементу ввода HTML в шаблоне.

   <input #fileInput ...

2. В вашем компоненте объявите ссылку на элемент ввода HTML, используя @ViewCild.

   @ViewChild('fileInput') fileInputRef: ElementRef;
   

3. Создать прослушиватель изменений для элемента ввода HTML. Он вызовет метод loadDataFile, когда пользователь выберет файл.

   ngOnInit() {
       const fileInput: HTMLInputElement = this.fileInputRef.nativeElement;
       this.fileInputRef.nativeElement.addEventListener('change', c => 
       this.loadDataFile(fileInput.files[0]));
   }
   

4. Реализация метода loadDataFile, который фактически загружает данные из файла.

   loadDataFile(file: File): void {  
       const fileReader= new FileReader();
       fileReader.onload = e => {
           // do something with fileReader.result, that contains the data
       };
       fileReader.readAsText(filename); 
   }