读取文件并解析其内容答案

【问题标题】：Read a file and parse its content读取文件并解析其内容
【发布时间】：2018-05-14 20:50:12
【问题描述】：

我有文件上传控件，其中包含如下所选文件，

<div class="Block">
  <label id="lbl">File </label>
  <input #fileInput type='file'/>
</div>

我有一个提交按钮，如下所示，

<button type="button" class="btn btn-primary" 
     (click)="uploadDocument()">Upload File</button>

当我选择一个文件并单击上传按钮时，我需要文件中的内容而不将其发送到服务器并从那里读取。

注意：文件类型为csv

【问题讨论】：

@Kartik 为您的问题找到了解决方案。

标签： angular angular5

【解决方案1】：

您可以在 javascript 中使用 FileReader 来实现此目的，因为它是 csv 文件

添加文件更改事件以将文件存储在对象中，如下所示，

<div class="Block">
  <label id="lbl">Code </label>
  <input type='file' (change)="fileChanged($event)">

</div>

该函数应该将文件设置为稍后使用的对象

file:any;
fileChanged(e) {
    this.file = e.target.files[0];
}

点击提交按钮后，可以使用javascript中FileReader的readAsText()方法获取如下内容，

uploadDocument(file) {
    let fileReader = new FileReader();
    fileReader.onload = (e) => {
      console.log(fileReader.result);
    }
    fileReader.readAsText(this.file);
}

注意：onload 事件将在读取内容后触发，因此您的逻辑应该在 onLoad 函数内。

【讨论】：

如何将解析到 fileReader 中的记录保存到 typescript 中的 hashmap 中？
我们是否需要移除我们订阅的FileReader事件监听器？
@arvind 如何将文件内容读取或存储到某个数组中，以便我可以将这些内容用于其他位置。
fileReader.readAsText() 给出错误：无法在“FileReader”上执行“readAsText”：参数 1 不是“Blob”类型。我尝试了很多解决方案，但似乎没有任何效果。我该怎么办？

【解决方案2】：

您从输入中提取文件并使用 FileReader API

readFile(file: File) {
    var reader = new FileReader();
    reader.onload = () => {
        console.log(reader.result);
    };
    reader.readAsText(file);
}

【讨论】：

如何读取文件内容或将文件内容存储到某个数组中，以便将这些内容用于其他位置。
var lines = myReader.result.split('\n');我的回答中的上述行就是这样做的。它将文件的内容拆分成一个数组。

【解决方案3】：

对于那些在阅读后询问如何获取字符串数据的人，数据在fileReader的result属性中。检查下面的代码示例。

    let fileString:any= "";

    uploadDocument(file) {
        let fileReader = new FileReader();
        fileReader.onloadend = (e) => {
           //console.log(myReader.result);
           // Entire file
           console.log(myReader.result);

           // By lines
           var lines = myReader.result.split('\n');
           for(var line = 0; line < lines.length; line++){
               console.log(lines[line]);
           }

           this.fileString = myReader.result;
        };

        fileReader.readAsText(this.file);
    }

【讨论】：

【解决方案4】：

如果你想把它变成函数，你可以这样做

    readFileContent(file: File): Promise<string> {
        return new Promise<string>((resolve, reject) => {
            if (!file) {
                resolve('');
            }

            const reader = new FileReader();

            reader.onload = (e) => {
                const text = reader.result.toString();
                resolve(text);

            };

            reader.readAsText(file);
        });
    }

然后

const fileContent = await readFileContent(file);

【讨论】：

【解决方案5】：

它有效，试试这样..

var reader = new FileReader();
        reader.onloadend =(e) =>{
          var result = reader.result; 
              console.log(i+'/'+result)
              this.file64.push(result)
        };  
        reader.readAsDataURL(file);

【讨论】：