读取文件并解析其内容

我有文件上传控件，它保存选定的文件，如下所示，

<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

您可以使用FileReader在 javascript 中实现这一点csv file

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

<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];
}

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

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

Note: onload读取内容后将触发事件，因此您的逻辑应该位于onLoad功能。