Question

我正在使用Material选择文件。在这里：

<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

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

<input #fileInput ...
在组件中，使用@ViewCild声明对HTML输入元素的引用。
```
@ViewChild('fileInput') fileInputRef: ElementRef;
```

在HTML输入元素上创建一个更改侦听器。用户选择文件时，它将调用loadDataFile方法。

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

实施实际上从文件中加载数据的loadDataFile方法。

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

从Angular Material File Select中读取文件

1 个答案: