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

Question

这个问题已经有答案了:

Reading uploaded text file contents in html (3 个回答)

已关闭 4 年前。

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

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。render() React 组件中的方法。 onFileUpload()方法在构造函数中绑定(bind)为 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
  }

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