angular - Ionic (Angular) - 读取文件并解析其内容

Question

我正在做一个项目，我想从文件中读取内容并从其数据中获取有用的信息并将其显示给用户，例如假设我有一个文本文件 (.txt)，其中有 10诸如“假上学”，“罗汉买了一支新笔”等台词。我知道这是一个愚蠢的例子，但只是想传达基本的想法。我想在 Ionic 中阅读此内容，并希望在某种操作后以美丽优雅的方式向用户展示它。我正在使用 cordova 文件选择器插件，现在想要读取我上面提到的文件内容。任何帮助将不胜感激，提前致谢:)

我已经尝试使用 http get 函数来读取文件，但不知道如何将其与所选文件一起使用。我做了下面的函数，现在我不知道如何将该文件作为参数传递给这个函数

public readFile(file) {
    this.http.get(file).pipe(map(res => res.text()))                
     .subscribe(data => {                         
      this.requests = data.split('\n');
      this.testtext = this.requests[20];
});

Answer 1

这是您可以使用的文件上传功能。这使用 FileReader。 read more

将其添加到您的组件文件中，并通过将其绑定(bind)到事件来在模板中使用它。

我已经添加了我认为有用的评论，但如果您对任何一行感到困惑，请告诉我。

public uploadFile(files: FileList): void {
    let results = [];
    if (files && files.length > 0) {
        const file: File = files.item(0); //assuming only one file is uploaded
        console.log('Uploaded file, Filename:' + file.name + 'Filesize:' + file.size + 'Filetype:' + file.type);
        const reader: FileReader = new FileReader();
        reader.readAsText(file);
        reader.onload = (e) => {
        const fileContent: string = reader.result as string;
        console.log('fileContent:' + fileContent);
        const lines: string[] = fileContent.split('\n'); //this depends on your line end character, I'm using \n in general
        //lines is an array of string, such as "Sham went to school", loop over it and process as you like
        };
    }
}

您可以在您的模板中使用它，例如:

<input type="file" (change)="uploadFile($event.target.files)">