通過FileReader Api讀取文件並將其轉換爲json對象

我正在研究Reactjs項目。在項目中，我有像我需要從本地讀取csv文件並將其轉換爲json對象的場景。我正在使用csvtojson節點包將csv文件轉換爲json對象。請參見下面的代碼：通過FileReader Api讀取文件並將其轉換爲json對象

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文件我得到一個未定義的錯誤造成的。請有人指導我，我做錯了什麼？

來源

2016-05-14 yasar

什麼是您的csv輸入？代碼看起來不錯，應該工作... – wollnyst

@wollnyst任何csv文件 – yasar

你找到答案，即使我正在尋找類似的解決方案。當我目前的開發階段是99％的客戶端並使用webpack-dev-server時，讓我知道如果您爲FileReader（）獲得上述 – Sumanth

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> 
    ); 
    } 
}

這將工作正常。

來源

2017-09-28 10:52:41

通過FileReader Api讀取文件並將其轉換爲json對象

回答

相關問題