Angular – 读取文件并解析其内容

发布时间：2020-12-17 07:52:48 所属栏目：安全来源：网络整理

导读：我有文件上传控件,它保存所选文件,如下所示, 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 当我选择一

我有文件上传控件,它保存所选文件,如下所示,

<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

你可以在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函数内.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!