通过FileReader Api读取文件并将其转换为json对象 [英] Read a File through FileReader Api and Convert it into json object
本文介绍了通过FileReader Api读取文件并将其转换为json对象的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在一个Reactjs项目上.在该项目中,我有这样的场景,例如我需要从本地读取一个csv文件并将其转换为json对象.我正在使用 csvtojson 节点程序包将csv文件转换为json对象.请参见下面的代码:
I am working on a Reactjs Project .In the project I have scenario like I need to read a csv file from local and convert it into json objects. I am using csvtojson node package for converting csv files to json objects. See the code below:
import React from 'react';
import ReactDOM from 'react-dom';
var objects;
var ReadFile = React.createClass({
readFile:function(){
var file = this.refs.file.files[0];
var reader = new FileReader();
reader.onload = function(evt){
var resultText = evt.target.result;
objects = this.csvToJson(resultText);
console.log(objects);
}.bind(this);
var newFile = file.slice(0,5000);
reader.readAsText(newFile);
},
csvToJson:function(csvString){
var Converter = require("csvtojson").Converter;
var converter = new Converter({});
converter.fromString(csvString, function(err,result){
//When i console log the result it is working but when i return The result:
// i am getting a undefined error
//console.log(result);
return result;
});
},
render:function(){
return (
<input type="file" ref="file" onChange={this.readFile} />
);
}
});
ReactDOM.render(<ReadFile />,document.getElementById('container'));
当我从 csvToJson 文件控制台记录结果时,出现了未定义的错误.请有人指导我,我在做什么错了?
When I console log the result from the csvToJson file I am getting a undefined error. Please somebody guide me, what I am doing wrong?
推荐答案
import React, { Component } from 'react'
import { connect } from 'react-redux'
import ReactFileReader from 'react-file-reader';
export default class CsvRead extends React.Component {
constructor(props) {
super(props);
}
handleFiles = files => {
var reader = new FileReader();
reader.onload = function(e) {
// Use reader.result
var csv = reader.result;
var lines = csv.split("\n");
var result = [];
var headers=lines[0].split(",");
for(var i=1;i<lines.length;i++){
var obj = {};
var currentline=lines[i].split(",");
for(var j=0;j<headers.length;j++){
obj[headers[j]] = currentline[j];
}
result.push(obj);
}
//return result; //JavaScript object
result= JSON.stringify(result); //JSON
console.log(result);
}
reader.readAsText(files[0]);
}
render() {
return (
<ReactFileReader handleFiles={this.handleFiles} fileTypes={'.csv'}>
<button className='btn'>Upload</button>
</ReactFileReader>
);
}
}
这可以正常工作.
这篇关于通过FileReader Api读取文件并将其转换为json对象的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文