如何在React中读取文本文件

Question

如何在React中读取文本文件

48

我想从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>

- Salvadore Rina

“htm示例代码”是什么意思？你尝试过./data.txt吗？ - ProblemsEverywhere

第一个答案可以被接受，但是这只有在你添加了webpack配置的加载器后才能生效，这将允许你导入文本文件。你可以查看raw-loader（webpack的一个加载器，允许将文件作为字符串导入）。 - Hayk Aghabekyan

@Drusto 我也有同样的结果，这是部分输出内容："<！DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <link rel="shortcut ico" - Salvadore Rina

4个回答

42

如果你想要获取一个 .txt 文件，首先你需要导入它：

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

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

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

- jmtorralvo

4

谢谢！这解决了我尝试加载YAML文件的问题。fs不起作用，所以我很高兴fetch可以！ - alex

3

收到“无法找到模块'../foo1/foo2.txt'或其相应的类型声明。” - Benur21

@Benur21，你可以在声明文件（d.ts）中添加以下代码：declare module '*.txt';。 - Sandro Mirijanashvili

18

尝试以下方法：

import text from './data.js'; // The relative path to your File

console.log(text);

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

const text = "My Text goes here";

export default text;

- KOTIOS

我在第一张截图中看不到上述代码，你仍在使用旧的方法。 - KOTIOS

我不明白你的意思。 - Salvadore Rina

import { text } from './data.txt'; 这行代码存在于你的程序中吗？ - KOTIOS

不是的，但当我粘贴时，它仍然保留为未使用的导入。 - Salvadore Rina

3

把 "import { text } from './data.js'" 改为 "import text from './data.js';" 可以使它对我起作用。 - Viragos

显示剩余4条评论

0

由于React是JavaScript编写的，因此这段代码应该可以工作。

HTML

<input type="file" id="fileInput" onchange="onLoad(event)">

JavaScript

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

- Kusum Kushwaha

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kuan-Yu Lin · Accepted Answer

只需尝试下面的代码，您就可以理解

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;