Javascript console.log()本地上载的csv文件
这是我代码中的文件上载处理程序Javascript console.log()本地上载的csv文件,javascript,filereader,Javascript,Filereader,这是我代码中的文件上载处理程序 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 actio
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
}
此代码段将未定义的记录到控制台。它缺少什么
更新1。
React组件中的render()
方法。onFileUpload()
方法在构造函数中绑定为this.onFileUpload=this.onFileUpload.bind(this)
render(){
返回(
...
);
}
您只需添加一个侦听器来进行日志记录,而不是同步进行记录这是一种异步方法。当Filereader完成时,我没有看到添加任何事件侦听器……请查看MDN上的文档示例,它现在的状态是reject(error)
将返回一个错误reject is undefined
@elanimo更新为throw。请原谅我的错误我删除了您回复的评论,因为问题是我在onFileUpload()
中有两个reader.onload()
调用。我是这样的:
render() {
return (
<div>
...
<input type='file' id='files' className='file-input-hidden' onChange={this.onFileUpload} />
</div>
);
}
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
}