使用React DropZone将CSV转换为JSON客户端 [英] Convert CSV to JSON client side with React DropZone

问题描述

这可能吗?

从反应放置区，我收到了一个File对象，该对象的File.preview属性值为blob:url.即File {preview: "blob:http://localhost:8080/52b6bad4-58f4-4ths-a2f5-4ee258ba864a"

From React dropzone, i receive a File object with a File.preview property whose value is a blob:url. i.e. File {preview: "blob:http://localhost:8080/52b6bad4-58f4-4ths-a2f5-4ee258ba864a"

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

Is there a way to convert this to json on the client? The file isnt need to be stored in a database (the convert JSON will be). I've attempted to use csvtojson but it's unable to use the file system as it uses node to power it. Ideally would like to convert this in the client if possible, once user has uploaded it. Any suggestions welcomed.

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

推荐答案

是的，它可能在FileReader和csv中使用:

Yes, its possible with FileReader and 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

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

这篇关于使用React DropZone将CSV转换为JSON客户端的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！