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数据填充到数据库中。我是reactjs的新手，因此我的上述代码可能格式不正确。谁能帮我如何使它起作用？任何帮助将不胜感激。

目标：

SO社区中很少有聪明的人向我暗示我在实现上是错误的。我实际上想做的是将本地文件上传到服务器。如何修改上面的代码以创建用于将文件上传到服务器的reactjs组件？

Answer 1

您要在一个类中声明一个类，并且自弃用以来，就不应再使用React.CreateClass。另外，您必须导入ReactDOM才能使用它（在文件底部）。

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

我假设您正在使用某种请求帮助程序库。在此示例中，我使用axios。

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

下一步将是在服务器上定义一个端点（我假设是Express），该端点将获取数据并将其使用fs模块（提示：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'))

Answer 2

因此，您正在混淆一些语法来声明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组件是大写的，因此当您看到大写的东西时，您会期望它最终将成为一个组件。如果不是这种情况，最好将其保留为小写。

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

2 个答案: