用于将csv文件上载到服务器的reactjs组件无法正常工作

Question

我正在学习reactjs来构建Web应用程序。基本上，我的目标是我想创建可以将本地reactjs文件上传到服务器的csv组件（我创建了服务器js）。为此，我在下面遇到了一个基本的reactjs组件实现：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  var FormBox = React.createClass({
    getInitialState: function () {
      return {
        file: '',
        FilePreviewUrl: ''
      };
    },
    pressButton: function () {
      e.preventDefault();
      console.log('handle uploading-', this.state.file);
    },
    uploadCSV: function (e) {
      e.preventDefault();
      let reader = new FileReader();
      let file = e.target.files[0];

      reader.onloadend = () => {
        this.setState({
          file: file,
          FilePreviewUrl: reader.result
        });
      }
      reader.readAsDataURL(file);
    },
    render: function () {
      let {FilePreviewUrl} = this.state;
      let FilePreview = null;
      if (FilePreviewUrl) {
        FilePreview = (<img src={FilePreviewUrl} />);
      } else {
        FilePreview = (<div className="previewText">Please select an Json for Preview</div>);
      }
      return (
        <div>
        <form action='.' enctype="multipart/form-data">
          <input type='file'  onChange={this.uploadCSV}/>
          <button onClick={this.pressButton}> Get it </button>
        </form>
        <div className="filePreview">
          {FilePreview}
        </div>
        </div>
      )
    }
  })
}
ReactDOM.render(<FormBox />, document.getElementById('root'))
export default App;

但是当我运行我的组件时，我收到了一个错误，这对我来说并不直观。这是错误：

Failed to compile.

./src/App.js
  Line 6:  Parsing error: Unexpected token

  4 | 
  5 | class App extends Component {
> 6 |   var FormBox = React.createClass({
    |       ^
  7 |     getInitialState: function () {
  8 |       return {
  9 |         file: '',

如何解决这个错误？如何将上述实现用于将csv文件上传到服务器？任何的想法？

澄清：

我这样做是因为我打算将本地csv文件上传到服务器并触发后端提供的API密钥以将csv数据填充到数据库。我是反应的新手，所以我的上述代码可能没有很好的形状。任何人都可以帮助我如何使这项工作？任何帮助，将不胜感激。

目标：

在SO社区，很少有聪明人建议我说实施错误。我实际上要做的是将本地文件上传到服务器。如何修改上面的代码来创建reactjs组件以将文件上传到服务器？

Answer 1

所以你要混淆一些语法来声明React组件。在这里，它用工作代码框重写：https://5y03xnvpqx.codesandbox.io/

import React, { Component } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class FormBox extends Component {
  constructor(props) {
    super(props);
    this.state = {
      file: "",
      filePreviewUrl: ""
    };
    this.pressButton = this.pressButton.bind(this);
    this.uploadCSV = this.uploadCSV.bind(this);
  }

  pressButton(e) {
    e.preventDefault();
    console.log("handle uploading-", this.state.file);
  }

  uploadCSV(e) {
    e.preventDefault();
    let reader = new FileReader();
    let file = e.target.files[0];

    reader.onloadend = () => {
      this.setState({
        file: file,
        filePreviewUrl: reader.result
      });
    };
    reader.readAsDataURL(file);
  }

  render() {
    const { filePreviewUrl } = this.state;
    let FilePreview = null;
    if (filePreviewUrl) {
      FilePreview = <img src={FilePreviewUrl} />;
    } else {
      FilePreview = (
        <div className="previewText">Please select an Json for Preview</div>
      );
    }
    return (
      <div>
        <form action="." enctype="multipart/form-data">
          <input type="file" onChange={this.uploadCSV} />
          <button onClick={this.pressButton}> Get it </button>
        </form>
        <div className="filePreview">{FilePreview}</div>
      </div>
    );
  }
}

function App() {
  return (
    <div className="App">
      <FormBox />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

你会注意到我把filePreviewUrl放在小写字母中。按照惯例，React组件是大写的，所以当你看到大写的东西时，你会发现它最终会成为一个组件。如果不是这样，最好将其保留为小写。

Answer 2

你在一个类中声明了一个类，你不应该再使用React.CreateClass了。此外，您必须导入ReactDOM才能使用它（在文件的底部）。

我不知道你为什么需要App组件，但我编辑了你的代码以包含正确的语法（无法真正检查csv上传逻辑）。

我假设您正在使用某种请求帮助程序库。在这个例子中我使用axios。

我真的不知道FileReader api，但是如果我理解正确的话，onloadend会返回文件数据。之后，我们可以将数据发送到服务器（我们使用axios.post）。

下一步是在服务器上定义一个端点（我假设是express），它获取数据并使用fs模块将其保存到服务器（HINT：fs.writeFile）。

import ReactDOM from 'react-dom';
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import axios from 'axios';

class App extends Component {
  render() {
    return (
      <FormBox />
    )
  }
}

class FormBox extends Component {
    constructor(props) {
      super(props);
      this.state = {
        file: '',
        filePreviewUrl: ''
      }
    }

    uploadCSV(e) {
      e.preventDefault();
      let reader = new FileReader();
      let file = e.target.files[0];

      reader.onloadend = (error, data) => {
        if (error) throw new Error('Oops! something went wrong!');
        axios.post('http://your-link-goes-here/', {data: data}).then(data => {
          this.setState({
            file: file,
            filePreviewUrl: reader.result
          });
        })
      }
      reader.readAsDataURL(file);
    }
    render() {
      let {filePreviewUrl} = this.state;
      let filePreview = null;
      if (filePreviewUrl) {
        filePreview = (<img src={filePreviewUrl} />);
      } else {
        filePreview = (<div className="previewText">Please select an Json for Preview</div>);
      }
      return (
        <div>
        <form action='.' enctype="multipart/form-data">
          <input type='file'  onChange={this.uploadCSV}/>
          <button onClick={(e) => this.uploadCSV(e)}> Get it </button>
        </form>
        <div className="filePreview">
          {filePreview}
        </div>
        </div>
      )
    }
}
ReactDOM.render(<App />, document.getElementById('root'))