console.log() 本地上传的csv文件

Question

这是我代码中的文件上传处理程序。

onFileUpload() {
    const file = document.querySelector('input[type=file]').files[0];

    const reader = new FileReader();    
    console.log('contents of file:', reader.readAsText(file));

    this.props.getFile(file); // an action
  }

此代码片段将 undefined 记录到控制台。它缺少什么？

更新 1. React 组件中的 render() 方法。 onFileUpload() 方法在构造函数中与 this.onFileUpload = this.onFileUpload.bind(this).

绑定

render() {
    return (
      <div>
        ...
        <input type='file' id='files' className='file-input-hidden' onChange={this.onFileUpload} />
      </div>
    );
  }

Answer 1

onFileUpload() {
    const file = document.querySelector('input[type=file]').files[0];

    const reader = new FileReader()
    reader.onload = event => console.log(event.target.result)
    reader.onerror = error => throw(error)
    reader.readAsText(file)

    this.props.getFile(file); // an action
  }

您只需添加一个侦听器即可进行日志记录，而不是同步进行

console.log() 本地上传的csv文件

console.log() locally uploaded csv file

javascript

filereader