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