json文件读取之reader.onload中的定义的变量在其函数外部进行处理

最新推荐文章于 2023-06-23 00:32:31 发布
最新推荐文章于 2023-06-23 00:32:31 发布
阅读量1.8k 收藏
点赞数 1
分类专栏： 项目实例 文章标签： 前端 reader FileReader json文件读取 reader.onload
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wlwdecs_dn/article/details/123468151
版权
项目实例 专栏收录该内容
18 篇文章 35 订阅 ¥159.90 ¥299.90
订阅专栏
本文探讨了在使用FileReader读取json文件时遇到的问题，即reader.onload内部的变量无法在外部访问。通过分析和测试，作者提出使用localStorage作为解决方案，详细介绍了实现方法和代码示例。
摘要由CSDN通过智能技术生成

采用FileReader读取json文件时，发现只能在reader.onload函数内部获取文件数据，且无法在函数外部访问其内部定义的变量，在网上查阅资料，发现也有博客提到这个问题，如下：

VUE的reader.onload方法怎么把值抛出去

在reader.onload中的定义的变量如何在外部调用

…
网上其他的方法和这两种大同小异，但经过测试，均不可行(下面的评论也反映有问题！！！)

解决方法

最终，采用localStorage很好地解决了问题&#

了解本专栏 订阅专栏 解锁全文
codersnote
关注
专栏目录
订阅专栏
vue 踩坑日志之 FileReader 无法抛出值
sw_dl的博客
08-22 573
【代码】vue 踩坑日志之 FileReader 无法抛出值。
JS读取JSON文件并调用 赋值给全局变量
Joaniee的博客
08-09 2664
function get_sub_data(schema, graphDate, zoom_g){ let sub_data=[]; let dir = eval("__constant__.graph_info['" + schema + "'].subgraph_dir"); let type = eval("__constant__.graph_info['" + schema + "'].type"); let file_name = getSubFileName(g
在reader.onload中的定义的变量如何在外部调用
car
11-19 9439
//方法一： function uploadFile(file) { return new Promise(function(resolve, reject) { let reader = new FileReader() reader.readAsArrayBuffer(file) reader.onload = ...
vue中怎么把reader.onload中的定义的变量在外部调用
唐璜Taro的博客
12-06 1920
👨 作者简介：大家好，我是Taro，前端领域创作者 ✒️ 个人主页：唐璜Taro 🚀 支持我：点赞👍+📝 评论 + ⭐️收藏通常我们在前端遇到读写服务端文件时，会遇到此类问题 二、解决方法 1. 改变this指向 2. 利用Promise 单独封装返回Promise对象的uploadFile函数，把文件流传给，然后通过 方法拿到返回结果 三、为什么直接赋值失败 很简单：在如上的代码示例中， 这里,this并没有按照大家想的那样指向 实例，而是指向了 函数的调用者：reader，所以导致给外部
解决 上传表格 readExcel 方法中赋予的值 在方法外拿不到问题
书山有路勤为径，学海无涯苦作舟
04-07 213
在上述代码中，this.sheetData的值被赋予在回调函数中的this上，而不是readExcel方法本身的this。在JavaScript中，函数会创建一个新的作用域，在这个作用域中，this关键字将会指向当前执行上下文的对象。在这种情况下，this指向了reader.onload函数的对象，而不是readExcel方法的对象。在上述代码中，vm变量存储了this，并在回调函数中使用vm.sheetData来访问readExcel方法中的this.sheetData。
VUE的reader.onload方法怎么把值抛出去
测试领域专家，多领域测试技术、管理、工具都略懂，略懂一二
03-08 9366
之前这个读取文件的方法：https://blog.csdn.net/Make_Progress365/article/details/107017637 handleChange(file) { let reader = new FileReader(); //先new 一个读文件的对象 FileReader if (typeof FileReader === "undefined") { //用来判断你的浏览器是否支持 FileReader this.$messag
JS原生读取 本地 JSON
一行IKiNn的博客
10-31 9334
JS原生读取本地JSON。添加等号和前方的变量名之后，JSON就变成了JS代码，隐式声明了一个变量，并将整段JSON作为对象赋值给它。把提取到的JSON对象赋值给在合适位置声明过的函数。但可以取个巧，对JSON文件做一点小改动，就能把JSON作为JS文件引入网页了。开发期间可能会遇到需要读取的JSON以文件形式储存在本地的情况。将刚刚获取到的文件内容放入新建的reader，并指定文件所使用的编码方式。在reader工作完成后，运行一些代码，将读取到的内容“丢”出来。
Element-UI中Upload上传文件前端缓存处理示例
10-17
`FileReader`的`readAsText`方法会读取文件内容为文本，然后`onload`事件会在读取完成时触发，我们在这个事件处理函数中尝试将文本解析为JSON对象，并赋值给`jsonContent`。如果解析失败，我们捕获异常并显示错误...
web端读取excel文件超简单的例子
07-30
在Web开发中，有时我们需要处理用户上传的Excel文件，例如数据导入、数据分析等场景。传统的做法是使用Java的Apache POI库，但这需要在服务器端进行处理，代码相对复杂。本示例将介绍一种更简单的方法，使得在Web端...
HTML5实现多文件图片预览上传功能
09-28
HTML5在现代网页开发中扮演着重要角色，尤其在处理用户交互和数据传输方面。其中，HTML5的File API提供了一种强大而灵活的方式，使得开发者可以实现多文件图片预览和上传功能。在这个实例中，我们将探讨如何利用...
基于Django 的 多摄像头实时显示系统优化 -- 全局配置项
shiter编写程序的艺术
06-23 1055
新增全局配置功能
js在onload中拿到返回值
m0_52364694的博客
04-03 3945
js的文件读取onload函数没办法直接返回值，但是有很多时候我们又需要返回一个在处理后的值。实现方法是传递一个绑定了this的回调函数 const callback = (result)=>{//定义回调函数 this.result = result console.log(this.result) } file_name = this.selectFile.name; if(!file_name.match(reg)){
HTML5之FileReader的使用
热门推荐
骆昊的技术专栏
05-23 14万+
HTML5定义了FileReader作为文件API的重要成员用于读取文件，根据W3C的定义，FileReader接口提供了读取文件的方法和包含读取结果的事件模型。 FileReader的使用方式非常简单，可以按照如下步骤创建FileReader对象并调用其方法： 1.检测浏览器对FileReader的支持 if(window.FileReader) { var fr =
Python处理CSV、JSON和XML数据的简便方法
Python中文社区
06-18 272
Python的卓越灵活性和易用性使其成为最受欢迎的编程语言之一，尤其是对于数据处理和机器学习方面来说，其强大的数据处理库和算法库使得python成为入门数据科学的首选语言...
解决reader.onloadend异步返回结果的问题
weixin_57521676的博客
04-23 2197
原本想直接return，但因为read.onloadend是异步任务，无法获取到。因此可以使要读取文件的函数返回值为一个promise，这样便可解决这一问题。
文件上传中如何拿到数据
zt199718的博客
08-02 327
文件上传（单个） base64 设置请求头 headers:{ ‘Content-Type’:‘application/x-www-form-urlencoded’ }, //拿到file let reader = new FileReader; reader.readAsDataURL(file); reader.onload = (ev)=> { //ev.target.result 读出的base64格式 console.log(ev) //图片预览 th
微信小程序onLoad获取无效（已解决）
tnt4399的博客
12-01 2576
在代码中创建一个组件，使用onload时发现控制台没打印出来值，本来我想一开始就将id值赋值。但后面请求接口的时候发现id为空，起初开始以为是值没有传进来。后面打印发现控制台压根没有值。
jquery与图片onload事件不得不说的故事
weixin_34402408的博客
02-24 1042
2019独角兽企业重金招聘Python工程师标准>>> ...
reader.onload 写成async await
最新发布
04-17
通常情况下，我们使用`FileReader`对象来读取文件，而`reader.onload`则是在文件读取完成后触发的回调函数。 如果你想将`reader.onload`写成`async/await`的形式，可以使用`Promise`来封装它。下面是一个示例代码：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

codersnote

对学生党 赞赏是鼓励也是鞭策！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值