我希望用户上传.csv文件,然后让浏览器能够解析该文件中的数据。我正在使用ReactJS。这怎么样?感谢。
答案 0 :(得分:19)
想出来。 react-file-reader和HTML5的FileReader的组合(请参阅this页面)。
将react-document-reader位置于render:
中<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]);
}
答案 1 :(得分:3)
我将使用Papa Parse(https://www.npmjs.com/package/papaparse)。这是一个示例react组件:
class FileReader extends React.Component {
constructor() {
super();
this.state = {
csvfile: undefined
};
this.updateData = this.updateData.bind(this);
}
handleChange = event => {
this.setState({
csvfile: event.target.files[0]
});
};
importCSV = () => {
const { csvfile } = this.state;
Papa.parse(csvfile, {
complete: this.updateData,
header: true
});
};
updateData(result) {
var data = result.data;
console.log(data);
}
render() {
console.log(this.state.csvfile);
return (
<div className="App">
<h2>Import CSV File!</h2>
<input
className="csv-input"
type="file"
ref={input => {
this.filesInput = input;
}}
name="file"
placeholder={null}
onChange={this.handleChange}
/>
<p />
<button onClick={this.importCSV}> Upload now!</button>
</div>
);
}
}
export default FileReader;
答案 2 :(得分:0)
在React(React.js)中上载和读取csv文件的最简单方法是react-papaparse(Home | Demo | Docs | Github)。 / p>
看下面的简单例子:
import React, { Component } from 'react'
import { CSVReader } from 'react-papaparse'
const buttonRef = React.createRef()
export default class CSVReader1 extends Component {
handleOpenDialog = (e) => {
// Note that the ref is set async, so it might be null at some point
if (buttonRef.current) {
buttonRef.current.open(e)
}
}
handleOnFileLoad = (data) => {
console.log('---------------------------')
console.log(data)
console.log('---------------------------')
}
handleOnError = (err, file, inputElem, reason) => {
console.log(err)
}
handleOnRemoveFile = (data) => {
console.log('---------------------------')
console.log(data)
console.log('---------------------------')
}
handleRemoveFile = (e) => {
// Note that the ref is set async, so it might be null at some point
if (buttonRef.current) {
buttonRef.current.removeFile(e)
}
}
render() {
return (
<>
<h5>Basic Upload</h5>
<CSVReader
ref={buttonRef}
onFileLoad={this.handleOnFileLoad}
onError={this.handleOnError}
noClick
noDrag
onRemoveFile={this.handleOnRemoveFile}
>
{({ file }) => (
<aside
style={{
display: 'flex',
flexDirection: 'row',
marginBottom: 10
}}
>
<button
type='button'
onClick={this.handleOpenDialog}
style={{
borderRadius: 0,
marginLeft: 0,
marginRight: 0,
width: '40%',
paddingLeft: 0,
paddingRight: 0
}}
>
Browe file
</button>
<div
style={{
borderWidth: 1,
borderStyle: 'solid',
borderColor: '#ccc',
height: 45,
lineHeight: 2.5,
marginTop: 5,
marginBottom: 5,
paddingLeft: 13,
paddingTop: 3,
width: '60%'
}}
>
{file && file.name}
</div>
<button
style={{
borderRadius: 0,
marginLeft: 0,
marginRight: 0,
paddingLeft: 20,
paddingRight: 20
}}
onClick={this.handleRemoveFile}
>
Remove
</button>
</aside>
)}
</CSVReader>
</>
)
}
}
答案 3 :(得分:0)
其他答案提到了使用 Papa Parse 基于浏览器的解析,我认为还值得一提的是gluestick (https://github.com/hotgluexyz/gluestick),它使用基于后端的解析和预构建的 React 组件。
如果您希望对输入数据或任何列映射进行验证,我建议您查看 React 组件和与其打包在一起的 Python 后端 API。
该存储库链接到 CodeSandbox (https://1c1dl.csb.app/) 上的演示