Как читать текстовый файл в ответ - PullRequest
Новая
       48

Как читать текстовый файл в ответ

3 голосов
/ 24 апреля 2019

Screenshot1 screenshot2

Я хочу читать из текстового файла в рамках проекта реагирования, но когда я пытаюсь выполнить и прочитать, я получаю пример кода HTML в журнале консоли. Это функция: 

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

И кнопка, которая вызывает его: 

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

Ответы [ 4 ]

2 голосов
/ 24 апреля 2019

Попробуйте следующий подход: 

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

console.log(text);

Создайте файл с именем data.js и добавьте содержимое ниже: 

const text= "My Text goes here";

export default text;
0 голосов
/ 30 мая 2019

Просто попробуйте следующий код, и вы поймете 

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;
0 голосов
/ 24 апреля 2019

Ваш проект доступен в браузере под localhost:3000.Ваш файл должен быть доступен в том же месте, используя относительный путь.

При использовании 'data.txt' браузер попытается загрузить его из 'localhost:3000/data.txt'.Проверьте URL в браузере, он должен уметь отображать содержимое файла.Если нет - вы должны исправить ваши настройки, скорректировать путь (весь URL / другой домен?) Или поместить этот файл в нужное место (каталог 'pub'?).

После выяснив это в браузере, вы можете попытаться загрузить / извлечь файл из реакции.

0 голосов
/ 24 апреля 2019

Поскольку React является javascript, этот код должен работать

Html 

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

Дж 

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