如何在React js中读取文件?

时间:2019-05-17 11:09:57

标签: reactjs

我想在reactJS中读取csv文件。我正在尝试文件系统('fs'),但无法正常工作。

以下是我在nodejs中相同的工作代码,但我在ReactJs中不工作。有人可以指导我如何在React js中读取文件。我们有什么简单的方法吗?我只想从同一项目目录中读取文件。

节点js中的工作代码

const CSVToJSON = require("csvtojson");
const CSVToCSV = require("jsontocsv");
const FileSystem = require("fs");

CSVToJSON().fromFile("./ca-500.csv").then(source => {
    console.log(source);
})

但是当在React js中尝试时,它给出了下面提到的错误

错误:找不到模块“ fs”

3 个答案:

答案 0 :(得分:0)

您可以尝试react-csv-reader

npm install --save react-csv-reader

example

用法

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import CSVReader from 'react-csv-reader'

class App extends Component {
  ...

  render() {
    return (
      <CSVReader
        cssClass="csv-reader-input"
        label="Select CSV with secret Death Star statistics"
        onFileLoaded={this.handleForce}
        onError={this.handleDarkSideForce}
        inputId="ObiWan"
        inputStyle={{color: 'red'}}
      />
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))

或者,您可以使用React File Reader

npm install react-file-reader --save

<ReactFileReader handleFiles={this.handleFiles} fileTypes={'.csv'}>
    <button className='btn'>Upload</button>
</ReactFileReader>
handleFiles = files => {
    var reader = new FileReader();
    reader.onload = function(e) {
    // Use reader.result
    alert(reader.result)
    }
  reader.readAsText(files[0]);
}

example

如果您只想读取本地文件,则可以使用papaparse

npm install papaparse

import React from 'react';
import Papa from 'papaparse';

class DataController extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            data: []
        };

        this.getData = this.getData.bind(this);
    }

    componentWillMount() {
        this.getCsvData();
    }

    fetchCsv() {
        return fetch('./ca-500.csv').then(function (response) {
            let reader = response.body.getReader();
            let decoder = new TextDecoder('utf-8');

            return reader.read().then(function (result) {
                return decoder.decode(result.value);
            });
        });
    }

    getData(result) {
        this.setState({data: result.data});
    }

    async getCsvData() {
        let csvData = await this.fetchCsv();

        Papa.parse(csvData, {
            complete: this.getData
        });
    }

    render() {
        return (
            <section className="data-controller">
                ...
            </section>
        );
    }
}

export default DataController;

答案 1 :(得分:0)

我找到了正确的解决方案。它在其他一些问题下面得到了回答。 这是该问题的链接。

How should I parse this json object in react with lifecycle method?

和正确的工作代码

import React, {Component} from 'react';

import './App.css';

import * as d3 from 'd3';

import data from './data_set/data.csv';

class App extends Component {

constructor(props) {
    super(props)
}

componentDidMount() {

    d3.csv(data).then(function(data) {
        console.log(data)
    }).catch(function(err) {
        throw err;
    })
}

render() {


    return ( 
             <div className = "App" >
              <div> Data Visualization </div> 
             </div>
        );
    }
}

export default App;

答案 2 :(得分:0)

可以使用 FileReader onload 方法读取文件数据

您会发现这对于在 React 中使用 File Reader 处理文件很有用 ReactJS File Reader