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

Posted 2023-02-22

【中文标题】使用 React DropZone 将 CSV 转换为 JSON 客户端

【英文标题】：Convert CSV to JSON client side with React DropZone

【发布时间】：2017-10-01 01:07:59

【问题描述】：

从React dropzone，我收到一个带有 File.preview 属性的 File 对象，其值为 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)
                        )
                )
            
        >

【参考方案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

【讨论】：

这里将数组的数组转换为对象***.com/questions/20807804/…