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

我正在学习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用于将文件上传到服务器的组件?


小唯快跑啊
浏览 199回答 2
2回答
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript