Question

我有文件上传控件，用于保存所选文件，如下所示

<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

Answer 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中的readAsText() FileReader方法获取如下内容，

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

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

Answer 2

将文件从输入中拉出并使用FileReader API

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

Answer 3

如果要使其作为函数，可以执行

    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);

Answer 4

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

fileReader

Answer 5

它有效，请尝试这样。.

multi_indexed_df.head(3)

date                       symbol   close   high    low     open    volume              
2020-09-15 09:15:00+05:30   MANA    157.65  162.10  156.65  162.10  1015692.0
2020-09-15 09:15:00+05:30   REL     157.05  158.95  156.45  157.75  762571.0
2020-09-15 09:15:00+05:30   TATA    156.00  157.45  155.55  157.00  545342.0

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

5 个答案: