web-dev-qa-db-ja.com

React DropZoneを使用してCSVをJSONクライアント側に変換する

これは可能ですか？

React dropzone から、値がblob：urlであるFile.previewプロパティを持つFileオブジェクトを受け取ります。つまり、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)
                        })
                })
            }}
        >
jsoncsvreactjsdropzone.js
7
racemic

はい、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

12
Joe Duncan

Joeの有益な回答により、私は自分のリソースを他の人のためにここで照合するようになりました。はい、FileReaderがその1つでした。

JSONをCSVに変換するためのクレジットはこれらに here と here に与えられます redux-form および redux-dropzone-form で使用するファイルのアップロード時）

編集：完全を期すためにGithubリポジトリがまもなく登場

0
lxm7