Question

我正在尝试让用户“选择文本文件”并在那里显示它。稍后，我将使用txt文件中的数据进行绘图。但是，我无法显示txt文件的内容。

有几个可用的模块，但是我不知道如何使它在React中工作。

有人知道吗？

以下是我发现的示例：

https://stackoverflow.com/a/40146883/10056318

 jsfiddle.net/0GiS0/nDVYd/

谢谢

Answer 1

handleFile = (e) => {
  const content = fileReader.result;
  console.log('file content',  content)
  // You can set content in state and show it in render.
}

handleChangeFile = (file) => {
  fileData = new FileReader();
  fileData.onloadend = handleFile;
  fileReader.readAsText(file);
}

render(){
  return(
     <div>
        <input type="file" accept=".txt" onChange={e => 
            handleChangeFile(e.target.files[0])} /> 
     </div>
  )
}

Answer 2

我在MDN文档中发现了该代码段，并且解决了我的问题，我希望这可以对其他人有所帮助：

cd

更多信息，https://developer.mozilla.org/pt-BR/docs/Web/API/FileReader/onload

Answer 3

安装 react-file-reader （一个灵活的ReactJS组件，用于处理样式化的HTML文件输入。）

简单示例

import ReactFileReader from 'react-file-reader';

class Dashboard extends Component {
  state = {
    file : ""
  }

  handleFiles = files => {
    this.setState({
      file: files.base64
    })
  }
  render() {
    return(
      <div className="files">
        <ReactFileReader handleFiles={this.handleFiles}>
          <button className='btn'>Upload</button>
        </ReactFileReader>

        <p>Read</p>
        <iframe src={this.state.file} frameBorder="0" height="400" width="50%" />
      </div>
    )
  }
}

更新答案： 该存储库已由所有者归档。现在是只读的。

如何在React中使用FileReader？

3 个答案: