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文件

1 个答案: