Question

我想从react项目中的一个文本文件中读取内容，但是当我尝试执行并读取时，我在控制台日志中得到了HTML示例代码。这是功能：

`onclick= () =>{
        fetch('data.txt')
            .then(function(response){
                return response.text();
            }).then(function (data) {
            console.log(data);
        })
    };`

以及调用它的按钮：

` <button onClick={this.onclick}>click string</button>`

Answer 1

尝试以下方法：

import { text } from './data.js'; // Relative path to your File

console.log(text);

创建一个名为data.js的文件并添加以下内容：

const text= "My Text goes here";

export default text;

Answer 2

如果要首先获取.txt文件，则必须将其导入：

   import raw from '../constants/foo.txt';

之后，您可以获取它并转换为文本：

fetch(raw)
  .then(r => r.text())
  .then(text => {
    console.log('text decoded:', text);
  });

Answer 3

您的项目可在localhost:3000下的浏览器中找到。您的文件应该使用相对路径在同一位置可用。

使用'data.txt'浏览器将尝试从'localhost:3000/data.txt'加载它。在浏览器中测试URL，它应该能够显示文件内容。如果不是，则必须更正设置，调整路径（整个URL /其他域？）或将此文件放置在适当的位置（“ pub”目录？）。

在浏览器中弄清楚之后，您可以尝试从react加载/获取文件。

Answer 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;

Answer 5

由于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);

如何在React中读取文本文件

5 个答案: