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

2023-11-21

From 反应降落区,我收到一个带有 File.preview 属性的 File 对象,其值为 blob:url。 IE。File {preview: "blob:http://localhost:8080/52b6bad4-58f4-4ths-a2f5-4ee258ba864a"

有没有办法在客户端将其转换为json?该文件不需要存储在数据库中(转换后的 JSON 会存储在数据库中)。我尝试过使用csv转json但它无法使用文件系统,因为它使用节点为其供电。理想情况下,如果可能的话,希望在用户上传后在客户端中进行转换。欢迎任何建议。

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

文件读取器API:https://developer.mozilla.org/en/docs/Web/API/FileReader
.csv 包:https://www.npmjs.com/package/csv

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 React DropZone 将 CSV 转换为 JSON 客户端 的相关文章

  • VSTS部署IIS应用程序winrm并更改appsettings.json

    我正在使用 部署 IIS 应用程序 winrm 任务在另一台计算机上部署 IIS 应用程序 此任务部署 zip 文件 在此 zip 中有一个 appsettings json 其变量以下划线开头和结尾 我需要替换每个环境的 appsetti
  • Redux 状态 - 最大推荐大小

    我正在构建一个项目管理应用程序 但我仍然在努力解决一个问题 在 Redux 状态中存储什么以及 按需 加载什么 Redux 状态是否有已知的 最大推荐大小 几十千字节 几百千字节 兆字节单位 请记住 归根结底 Redux 只是 如何 将信息
  • 如何使用 next.js 将动态 html 元素注入到页面?

    如何使用next js动态注入html元素到页面 这些元素未知类型 例如 输入 复选框 img 使用返回 json 类型的 api 指定此元素 如下所示 id rooms title Rooms order 1 type string wi
  • PyQt:数据不可 JSON 序列化

    我是 PyQt GUI 的新手 我想获取a的数据QLineEdit文本框 为此我正在使用text 方法 我正在获取数据 但数据类型是QString 我需要将其作为 json 数据传输到服务器 为此我使用json dumps 方法 但我收到错
  • 将 JSON URL 转换为 R 数据帧

    我在将 JSON 文件 从 API 转换为 R 中的数据帧时遇到问题 例如 URL 我尝试了 S O 的一些不同建议 包括将json数据转换为R中的数据框 https stackoverflow com questions 28683769
  • 将 useRef 挂钩传递给 ref 属性的正确方法

    我不确定如何更明确地提出这个问题 但它是关于值传递 and 引用传递反应中的情况 还有胡克斯 我正在使用 gsap 来制作 div 滑入和滑出的动画 这是其上下文 但我猜测 ref 的用途并不重要 因此 这工作得很好 尽管这是一种更典型的类
  • React/Redux bundle.js 太大

    我有一个小型的 React 项目 Webpack生成的bundle js大小为6 3Mb 如何将大小减小到 github webpack config js module exports devtool inline source map
  • 导出到 CSV 时 Gridview 出现空行

    这个问题是由进一步讨论引发的这个问题 https stackoverflow com questions 6674555 export gridview data into csv file 6674589 noredirect 1 com
  • 如何将 CSV 文件读入 .NET 数据表

    如何将 CSV 文件加载到System Data DataTable 根据CSV文件创建数据表 常规 ADO net 功能是否允许这样做 我一直在使用OleDb提供者 但是 如果您正在读取具有数值的行 但希望将它们视为文本 则会出现问题 但
  • 将 JSON 数据导入 Google 表格

    我从 Web 服务中提取数据 其格式为 JSON 我正在为 Google Sheets 编写一个 Google Apps 脚本 它将为我填充数据 我的问题是 我似乎无法解析它 Doing var dataset myJSONtext Bro
  • 如何在 Django REST Framework 中序列化“对象列表”

    我需要一个序列化器来完成这样的事情 items 12 name item 1 66 name item 2 我应该如何声明我的序列化器才能得到这样的东西 这是否是一个有效的 JSON 还是应该如下所示 items name item 1 i
  • 在玩笑中运行普通转换后如何转换模块

    用笑话测试 React 组件 其中一些组件使用 OpenLayers ol 软件包 v5 2 0 在 ol 包 v4 中 我应用了 transformIgnorePatterns 来转换 ol 包 jest transformIgnoreP
  • 在 Django 模板中通过键访问字典

    我正在将字典从我的视图传递到模板 所以 key1 value1 key2 value2 传入并循环键 值对很好 但是我还没有找到从特定键直接在视图中访问的优雅解决方案 例如 key1 例如 bu json items key1 我可以使用一
  • dart中解析对象(不支持的操作:无法添加到固定长度列表)

    我有一个用户对象 当用户登录 注册时 该对象保存到云 Firestore 数据库中 因此 当用户登录时 将从数据库中检索用户对象 并且一切正常 直到我尝试对列表 usersProject 执行 添加 操作 Add the new proje
  • 在 Play2 和 Scala 中解析没有数据类型的 JSON

    people name Jack age 15 name Tony age 23 name Mike age 19 这是我试图解析的 json 示例 我希望能够对每个人进行 foreach 操作并打印他们的姓名和年龄 我知道当 json 数
  • 使用 Ajax.Request 将 JSON 从浏览器传递到 PHP 的最佳方法

    您好 我有一个 JSON 对象 它是一个二维数组 我需要使用 Ajax Request 将其传递给 PHP 我知道的唯一方法 现在我使用js函数手动序列化我的数组 并获取以下格式的数据 s 1 d 3 4等 我的问题是 有没有办法更直接 有
  • 在 webpack 2.x 中使用 autoprefixer 和 postcss

    如何使用autoprefixer使用 webpack 2 x 以前 它曾经是这样的 module loaders test scss loader style css sass postcss postcss gt return autop
  • 创建一个 JSON 对象以在 Spring Boot 测试中发布

    我想编写基本测试来使用 JSON 负载在 users URL 上执行 POST 请求来创建用户 我找不到如何将新对象转换为 JSON 到目前为止有这么多 这显然是错误的 但解释了目的 Test public void createUser
  • 使用 Ajax 请求作为源数据的 Jquery 自动完成搜索

    我想做的事 我想使用 jquery 自动完成函数创建一个输入文本字段 该函数从跨域curl 请求获取源数据 结果应该与此示例完全相同 CSS 在这里并不重要 http abload de img jquerydblf5 png http a
  • 如何在 Swiper 实例之外使用 useSwiper?

    我在用着用于 React 的滑动器 https swiperjs com react显示一些幻灯片 我一直坚持使用外部按钮在幻灯片 上一张和下一张 之间导航 刷卡器有一个useSwiper hook https swiperjs com r

随机推荐

  • 在 IIS 上运行时,ASP.NET Web 应用程序中的模拟不起作用

    我正在开发在 Intranet 环境中工作的 ASP NET 4 0 MVC3 Web 应用程序 该应用程序使用 Windows 身份验证 其应用程序池由在域控制器上设置了 spn 的域用户运行 使用 Kerberos 进行身份验证 在 I
  • 如何在Java中拆分HashMap

    我想知道是否可以将 HashMap 拆分为更小的子映射 就我而言 我有一个包含 100 个元素的 HashMap 我想从原始 HashMap 创建 2 个 或更多 更小的 HashMap 第一个包含从 0 到 49 的条目 第二个包含从 5
  • SVN分支的一个分支

    我们的代码存储库包括 树干 分支 A 从主干开始 分支 B 从分支 A 开始 在分支 A 上工作的程序员希望将其重新集成到主干中 并继续仅在主干上工作 我们还不想将分支 B 重新集成到分支 A 中 是否可以让分支 B 与主干相关 而不是与分
  • 如何在不损坏文本的情况下去除点/噪音?

    我正在使用 OpenCV 和 Python 处理图像 我需要从图像中去除点 噪声 我尝试了扩张 使点变小 但是文本被损坏了 我还尝试了两次循环膨胀和一次腐蚀 但这并没有给出令人满意的结果 我还有其他方法可以实现这一目标吗 谢谢 EDIT 我
  • 当用户在输入字段中键入字符时突出显示 DIV 的文本

    我看过很多关于使用 javascript 在 DIV 中突出显示文本的帖子 但没有一个完全符合我的要求 我需要做的是在用户输入搜索词时逐个字符地突出显示特定 DIV 中的文本 相反 当用户退格或删除字符时 我需要 取消突出显示 同一 DIV
  • django.db.utils.IntegrityError:外键约束失败

    My 模型 py class Order models Model user models ForeignKey User blank True null True on delete models PROTECT customer ema
  • 如何从 Java 中的 SOAP 响应中提取数据?

    我设置了一个客户端来向国家气象局 SOAP 服务器发送请求 我收到了预期的响应 但我不确定从中提取所需数据的最佳方法 例如 XML 中有很多额外的数据 在 SOAPBody 中 但我只想获取我为 POJO 设置的参数 例如温度 的数据 提取
  • 从 JavaScript Online 访问客户端的“localhost”

    这就是我正在努力做的事情 我制作了一些包含 JavaScript 代码的 html 页面 并将它们托管在雅虎服务器上 现在 当具有特定浏览器的客户端查看这些网页时 JavaScript 代码使用XMLHTTPRequest在 h1ttp l
  • 向 Spring Boot 应用程序添加附加参数

    我想知道是否可以添加 spring 的附加参数 例如 Dspring profiles active prod到 Spring Boot 应用程序 以防将其作为service 我检查了自动生成的脚本spring boot maven plu
  • 如何在 Team Foundation Server 2015 中启用 C# 7 构建?

    我们在本地安装了 Team Foundation Server TFS 2015 我们希望使用 Visual Studio 2017 来利用最新的 C 语言功能 我们尚未准备好升级到 TFS 2017 需要执行哪些步骤才能在 TFS 201
  • 无法使用不同的用户名从 pg_dump 恢复 psql 数据库

    我需要使用 postgres 用户名 1 从计算机 1 转储一个 postgres 数据库 然后使用 postgres 用户名 2 将其恢复到计算机 2 上 我不断遇到错误 看起来备份文件想要使用 username1 当我在computer
  • 将值数组发送到 ruby​​ 中的 sql 查询?

    我正在努力解决似乎是红宝石语义问题 我正在写一个方法 需要一个参数数量可变从一个表单并创建一个Postgresql 查询 def self search params counter 0 query params each do key v
  • OpenX 异步标签

    我们都想让我们的网站更快 谷歌在这里展示了一些示例 http code google com speed articles html5 performance html 我们使用 OpenX 来提供广告 因此 假设浏览器支持 FF3 6 我
  • Boost.Multi precision cpp_int - 转换为字节数组?

    http www boost org doc libs 1 53 0 libs multi precision doc html index html 我刚刚开始探索这个图书馆 好像没有办法转换cpp int到一个字节数组中 有人可以看到这
  • 如果 go 中的一个 goroutine 发生错误,则关闭多个 goroutine

    考虑这个函数 func doAllWork error var wg sync WaitGroup for i 0 i lt 2 i wg add 1 go func defer wg Done for j 0 j lt 10 j resu
  • 从实现类调用 C# 接口默认方法

    C 8 支持接口中的默认方法实现 我的想法是将日志记录方法注入到这样的类中 public interface ILoggable void Log string message gt DoSomethingWith message publ
  • 什么是依赖属性?

    什么是 Net 中的依赖属性 尤其是在 WPF 上下文中 和普通房产有什么区别 我发现唯一有用且写得好的解释是 http www wpftutorial net dependencyproperties html 基本上 Dependenc
  • 通过应用内购买删除广告

    我正在寻找有关如何通过应用内购买删除应用程序中的广告的教程或解释 我会在我的应用程序中放置一些带有 ad mob 的广告 但我也希望用户在支付一点捐款时可以禁用这些广告 您是否知道可以在其中找到如何执行此操作的分步说明的网站或教程 或者我需
  • Android libc.so 崩溃?

    我正在使用 AndEngine 和PhysicsBox2DExtension 来制作游戏 我的游戏不断崩溃 我在未经过滤的 LogCat 中得到以下信息 07 06 13 25 27 266 I DEBUG 19582 07 06 13 2
  • 使用 React DropZone 将 CSV 转换为 JSON 客户端

    From 反应降落区 我收到一个带有 File preview 属性的 File 对象 其值为 blob url IE File preview blob http localhost 8080 52b6bad4 58f4 4ths a2f