使用React DropZone将CSV转换为JSON客户端

小编典典

使用React DropZone将CSV转换为JSON客户端

reactjs

从React dropzone，我收到一个File对象，该对象具有File.preview属性，其值为blob：url。即File {preview: "blob:http://localhost:8080/52b6bad4-58f4-4ths-a2f5-4ee258ba864a"

有没有办法在客户端上将其转换为json？该文件不需要存储在数据库中（将转换为JSON）。我尝试使用csvtojson，但是由于使用节点来为其供电，因此无法使用文件系统。理想情况下，一旦用户上载，便希望在客户端中进行转换。任何建议欢迎。

        <Dropzone
            name={field.name}
            onDrop={(acceptedFiles, rejectedFiles) => {
                acceptedFiles.forEach(file => {
                    console.log(file)
                    let tempFile = file.preview
                    csv()
                        .fromSteam(tempFile) // this errors with fs.exists not a function as its not running serverside

                        .on('end_parsed',(jsonArrObj)=>{
                            console.log(jsonArrObj)
                        })
                })
            }}
        >

阅读 312

2020-07-22

共1个答案

小编典典

是的，可以通过FileReader和进行csv：

import csv from 'csv';

// ...

const onDrop = onDrop = (e) => {
    const reader = new FileReader();
    reader.onload = () => {
        csv.parse(reader.result, (err, data) => {
            console.log(data);
        });
    };

    reader.readAsBinaryString(e[0]);
}

// ...

<Dropzone name={field.name} onDrop={onDrop} />

FileReader
API：https :
//developer.mozilla.org/en/docs/Web/API/FileReader
csv包：https :
//www.npmjs.com/package/csv

2020-07-22