Wie zum hochladen und Lesen von CSV-Dateien in React.js?

Möchte ich die user hochladen .csv-Datei, und dann haben die browser in der Lage sein, um eine Analyse der Daten aus dieser Datei. Ich bin mit ReactJS. Wie würde das funktionieren? Danke.

  • was hast du versucht?
  • es gibt eine Reihe von Paketen, die das Lesen von Dateien mit ReactJS, aber keiner von Ihnen scheinen befassen sich mit CSV-Dateien.
  • Könnten Sie das näher erläutern? "Parsen" .csv könnte bedeuten, eine Menge Dinge. Die Daten aus der .csv sein soll, formatiert und angezeigt werden, irgendwie?
  • die Analyse ist nicht das Problem, es war immer die Daten in einem lesbaren format
InformationsquelleAutor user2593758 | 2017-06-26
  1. 19

    Herausgefunden. Eine Kombination von reagieren-Datei-reader und HTML5-FileReader (siehe diese Seite).

    Platziert reagieren-Datei-reader-bit innerhalb der render:

    <ReactFileReader handleFiles={this.handleFiles} fileTypes={'.csv'}>
    <button className='btn'>Upload</button>
</ReactFileReader>

    Und dann diese vor.

    handleFiles = files => {
    var reader = new FileReader();
    reader.onload = function(e) {
    //Use reader.result
    alert(reader.result)
    }
  reader.readAsText(files[0]);
}
    • Ich habe versucht, das zu machen und ich bekomme diese Fehlermeldung: TypeError: reader.readAsText ist nicht eine Funktion. Irgendwelche Tipps?
    • Stellen Sie sicher, dass Sie mit readAsText auf ein file-Objekt (in diesem Fall, dass die Dateien[0] ist ein file-Objekt). hast du mehr von deinem code?
    • Aus irgendeinem Grund FileReader war nicht die Arbeit, nach einiger Suche hatte ich die Verwendung Fenster.FileReader und das war der trick.
    InformationsquelleAutor user2593758
  2. 3

    Ich würde Papa Parse (https://www.npmjs.com/package/papaparse). Und hier ist ein Beispiel, reagieren Komponente:

    class FileReader extends React.Component {
  constructor() {
    super();
    this.state = {
      csvfile: undefined
    };
    this.updateData = this.updateData.bind(this);
  }

  handleChange = event => {
    this.setState({
      csvfile: event.target.files[0]
    });
  };

  importCSV = () => {
    const { csvfile } = this.state;
    Papa.parse(csvfile, {
      complete: this.updateData,
      header: true
    });
  };

  updateData(result) {
    var data = result.data;
    console.log(data);
  }

  render() {
    console.log(this.state.csvfile);
    return (
      <div className="App">
        <h2>Import CSV File!</h2>
        <input
          className="csv-input"
          type="file"
          ref={input => {
            this.filesInput = input;
          }}
          name="file"
          placeholder={null}
          onChange={this.handleChange}
        />
        <p />
        <button onClick={this.importCSV}> Upload now!</button>
      </div>
    );
  }
}

export default FileReader;
    • Wie konnte Sie konvertieren hochgeladen .xlsx Datei in csv und dann analysieren mit papaparse ?
    InformationsquelleAutor ttfreeman
Schreibe einen Kommentar