Question

我正在尝试将图片或csv文件上传到react应用。我知道有一个库（react-file-upload）可以做到这一点，但我想知道它是如何工作的。例如，如果我想要做的就是将本地csv文件上传到应用程序并使用csvtojson将其转换为json格式，我该怎么办？

我有一个react组件具有以下内容：

<input
        onChange={e => onUpload(e.target.files[0])}
        style={{display: 'none'}}
        type="file"
      />

单击按钮后，选择文件。我console.log，我得到以下内容：

{name: "9.jpg", lastModified: 1527215391059, lastModifiedDate: Thu May 24 2018 19:29:51 GMT-0700 (PDT), webkitRelativePath: "", size: 240564, …}

如何使用json将文件转换为csvtojson数组？

const csvFilePath='<path to csv file>'
const csv=require('csvtojson')
csv()
.fromFile(csvFilePath)
.then((jsonObj)=>{
    console.log(jsonObj);
    /**
     * [
     *  {a:"1", b:"2", c:"3"},
     *  {a:"4", b:"5". c:"6"}
     * ]
     */ 
})

Answer 1

我认为我使用FileReader找到了解决方案。

class EnhancedUploader extends React.PureComponent {
        handleFiles(files) {
          if (window.FileReader) {
            this.getAsText(files[0]);
          } else {
            alert('FileReader is not supported!');
          }
        }

        getAsText(fileToRead) {
          const reader = new FileReader();
          reader.readAsText(fileToRead);
          reader.onload = e => this.fileReadingFinished(e);
          reader.onerror = e => this.errorHandler(e);
        }

        fileReadingFinished(event) {
          dataProcessor(event.target.result);
        }

        errorHandler(event) {
          if (event.target.error.name === 'NotReadableError') {
            alert('Cannot read file!');
          }
        }

        render() {
          return <Uploader onUpload={files => this.handleFiles(files)} />;
        }
      };

这个的关键部分是getAsText，我使用new FileReader。它有一些你可以使用的钩子，如onload或onerror。

Uploader comp看起来像这样：

const Uploader = ({onUpload}) => {
  return (
    <Button variant="raised" color="primary" component="label">
      {'Upload'}
      <input
        onChange={e => onUpload(e.target.files)}
        style={{display: 'none'}}
        type="file"
      />
    </Button>
  );
};

读取数据后，它将是一个字符串，这是我使用csvtojson将其读入json的地方，但您可以使用其他解析器执行相同的工作。我将其称为stringProcessor，并将其传递给反应HOC，后者在EnhancedUploader（dataProcessor(event.target.result)）中使用。

const stringProcessor = async csvStr => {
  const jsonData = await csv({}).fromString(csvStr);

  console.log(jsonData);
};

将文件上传到单页面应用

1 个答案: