web-dev-qa-db-fra.com

Comment lire un fichier texte dans React

Screenshot1Screenshot2

Je veux lire à partir d'un fichier texte dans le projet React, mais lorsque j'essaie d'exécuter et de lire, j'obtiens un exemple de code HTML dans le journal de la console. Voici la fonction:

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

Et le bouton qui l'appelle:

` <button onClick={this.onclick}>click string</button>`
reactjstext-filesreadfile
5
Salvadore Rina

Essayez simplement le code ci-dessous et vous comprendrez

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;
1
林冠宇

Votre projet est disponible dans le navigateur sous localhost:3000. Votre fichier doit être disponible au même endroit en utilisant le chemin relatif.

En utilisant 'data.txt' le navigateur essaiera de le charger depuis 'localhost:3000/data.txt'. Testez l'url dans le navigateur, il devrait pouvoir afficher le contenu du fichier. Sinon - vous devez corriger votre configuration, ajuster le chemin (URL entière/autre domaine?) Ou placer ce fichier au bon endroit (répertoire 'pub'?).

Après comprendre cela dans le navigateur, vous pouvez essayer de charger/récupérer le fichier de réagir.

1
xadm