如何在react中读取文本文件
IT技术
reactjs
text-files
readfile
                    2021-05-24 05:36:02
                
            
        4个回答
            简单试试下面的代码你就明白了
import React, { Component } from 'react';
class App extends Component {
  constructor(props) {
    super(props);
  }
  showFile = async (e) => {
    e.preventDefault()
    const reader = new FileReader()
    reader.onload = async (e) => { 
      const text = (e.target.result)
      console.log(text)
      alert(text)
    };
    reader.readAsText(e.target.files[0])
  }
  render = () => {
    return (<div>
      <input type="file" onChange={(e) => this.showFile(e)} />
    </div>
    )
  }
}
export default App;
尝试以下方法:
import { text } from './data.js'; // Relative path to your File
console.log(text); 
创建一个名为 data.js 的文件并添加以下内容:
const text= "My Text goes here";
export default text;
如果你想先获得一个 .txt 文件,你必须导入它:
   import raw from '../constants/foo.txt';
之后,您可以获取它并转换为文本:
fetch(raw)
  .then(r => r.text())
  .then(text => {
    console.log('text decoded:', text);
  });
由于 React 是 javascript,所以这段代码应该可以工作
html
<input type="file" id="fileInput" onchange="onLoad(event)">
JS
onLoad = function (event){
 var file = fileInput.files[0];
    var textType = /text.*/;
    if (file.type.match(textType)) {
        var reader = new FileReader();
        reader.onload = function(e) {
            var content = reader.result;
            //Here the content has been read successfuly
            alert(content);
        }
        reader.readAsText(file);    
    } 
}
如果要加载数据,则直接在页面加载时执行此事件。
import { text } from './data.txt'; // Relative path to your File
console.log(text); 
其它你可能感兴趣的问题