【JavaScript】FileReader读取文件成功,但存储的数据为空——总结

目录

  • 问题
  • 解决

问题

如题,使用下列代码读取上传的文件:
在这里插入图片描述

for (let i = 0; i < files.length; i++) {
    const reader = new FileReader();
    const fileName = files[i].name;
    reader.onload = function(e) {
        file_datas[fileName] = e.target.result;
    }
    // 根据需要设置读取模式:'text' 或 'binary'
    reader.readAsText(files[i]);
}

但是通过debugconsole.log输出的file_datas都为空,并没有任何数据。

这时候尝试在在循环的过程中输出数据,发现是可以输出结果的。

解决

也就是说,中间赋值的时候值是存在的,那么 有可能是变量的作用域问题或者其它。

但是变量是在函数外定义的,所以排除作用域的问题。

真正的原因是:FileReader读取文件是异步的,所以在代码执行完但是还未读取完,所以可能出现空值的情况。

这时候将代码修改,用Promise 或 async/await 等方式来处理异步操作的结果:

        function readFile(file) {
            return new Promise((resolve, reject) => {
                const reader = new FileReader();
                reader.onload = function(e) {
                    resolve(e.target.result);
                };
                reader.onerror = function(e) {
                    reject(e);
                };
                reader.readAsText(file);
            })
        }

        async function handleFiles(files, engine, recommend_method, single_or_multiple, epoch, num_train, cnt_limit) {
            const file_datas = {};
            const promises = [];
            for (let i = 0; i < files.length; i++) {
                const fileName = files[i].name;
                const promise = readFile(files[i])
                .then(fileContent => {
                    file_datas[fileName] = fileContent;
                })
                .catch(error => console.log(error));
                promises.push(promise);
            }
            await Promise.all(promises);
            // console.log(file_datas);
            // 等待文件读取完成后再发送数据
        }

        handleFiles(files, engine, recommend_method, single_or_multiple, epoch, num_train, cnt_limit);

将处理函数放在文件读取完毕后即可。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/270122.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

SQL server 数据库面试题及答案(实操3)

一、编程题 公司部门表 department 字段名称 数据类型 约束等 字段描述 id int 主键&#xff0c;自增 部门ID name varchar(32) 非空&#xff0c;唯一 部门名称 description varchar(1024) …

第三十六周:文献阅读+注意力/自注意力机制

目录 摘要 Abstract 文献阅读&#xff1a;锂离子电池RUL预测的SA-LSTM 现有问题 提出方法 提出方法的结构 SA-LSTM预测模型的结构 研究实验 研究贡献 注意力机制 Self-Attention&#xff08;自注意力机制&#xff09; 注意力与自注意力 代码实现attention、self-at…

喜报频传!百望云获评“2023数字经济独角兽”称号

“数字经济独角兽”是在数字经济领域具备高成长性、高创新性和高潜力性的企业&#xff0c;他们不仅是数字经济的先锋&#xff0c;是科技创新型企业的典范&#xff0c;也是推动经济发展的新兴引擎。 12月20日&#xff0c;“2023数字经济独角兽大会”在北京大兴区成功举办。大会以…

介绍一个在线K8S练习平台

是不是有很多小伙伴想学习k8s&#xff0c;但是又没有机器去练习。使用自己的笔记本电脑或者主机只能搭建单机版本的k8s来练习。 现在福利来了&#xff0c;给大家介绍一个在线多节点k8s练习平台&#xff1a;Play with Kubernetes。 Play with Kubernetes 介绍 Play with Kube…

南邮最优化期末复习

黄金分割法 单纯形法&#xff08;大M法&#xff09; 求min, σ找最小&#xff0c;终止条件全部大于0 θ找最小&#xff0c;且不能为负数求max, σ找最大&#xff0c;终止条件全部小于0 θ找最小&#xff0c;且不能为负数 例题 二阶段单纯形法想 分支定界法&#xff08;第二章&…

等级保护的物理安全技术措施

目录 信息安全等级保护物理安全技术的控制点 物理位置的选择 物理访问控制 防盗窃和防破坏 防雷击 防火 防火和防潮 防静电 温湿度控制 电力供应 电磁防护 信息安全等级保护物理安全技术的控制点 物理位置的选择 物理访问控制 防盗窃和防破坏 防雷击 防火 防火和防…

【Materials Studio】 Materials Studio 2019 安装教程

【Materials Studio】 Materials Studio 2019 安装教程 软件介绍软件安装安装体验软件获取 软件介绍 Materials studio是一个完整的建模和仿真环境&#xff0c;旨在让材料科学和化学领域的研究人员能够预测和理解材料的原子和分子结构与其特性和行为之间的关系。使用Materials…

Redis数据结构(常用5+4种特殊数据类型)

1、Redis 数据类型以及使用场景分别是什么&#xff1f; Redis 提供了丰富的数据类型&#xff0c;常见的有五种数据类型&#xff1a;String&#xff08;字符串&#xff09;&#xff0c;Hash&#xff08;哈希&#xff09;&#xff0c;List&#xff08;列表&#xff09;&#xff…

【Vue3+TypeScript】快速上手_笔记

前言 1. Vue3简介 2020年9月18日&#xff0c;Vue.js发布版3.0版本&#xff0c;代号&#xff1a;One Piece&#xff08;n 经历了&#xff1a;4800次提交、40个RFC、600次PR、300贡献者 官方发版地址&#xff1a;Release v3.0.0 One Piece vuejs/core 截止2023年10月&#xf…

智能优化算法应用:基于孔雀算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于孔雀算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于孔雀算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.孔雀算法4.实验参数设定5.算法结果6.参考文献7.MA…

Spring系列学习二、Spring框架的环境配置

Spring框架的环境配置 一、Java环境配置二、 Spring框架的安装与配置三、Maven与Gradle环境的配置四、IDE环境配置&#xff08;Eclipse与IntelliJ IDEA&#xff09;五、结语 一、Java环境配置 所有编程旅程总是得从基础开始&#xff0c;如同乐高积木大作的基座&#xff0c;首先…

内存之-LeakCanary

关于作者&#xff1a;CSDN内容合伙人、技术专家&#xff0c; 从零开始做日活千万级APP。 专注于分享各领域原创系列文章 &#xff0c;擅长java后端、移动开发、人工智能等&#xff0c;希望大家多多支持。 目录 一、导读二、概览三、使用四、原理分析4.1 自动初始化4.1.1 初始化…

FPGA分频电路设计(2)

实验要求&#xff1a; 采用 4 个开关以二进制形式设定分频系数&#xff08;0-10&#xff09;&#xff0c;实现对已知信号的分频。 类似实验我之前做过一次&#xff0c;但那次的方法实在是太笨了&#xff1a; 利用VHDL实现一定系数范围内的信号分频电路 需要重做以便将来应对更…

redis—String字符串

目录 前言 1.字符串数据类型 2.常见命令 3.典型应用场景 前言 字符串类型是Redis最基础的数据类型&#xff0c;关于字符串需要特别注意: 1)首先Redis中所有的键的类型都是字符串类型&#xff0c;而且其他几种数据结构也都是在字符串类似基础.上构建的&#xff0c;例如列表…

vue3使用mixins

<template><div>{{ num }}___{{ fav }}</div><button click"favBtn">改变值</button> </template><script setup lang"ts"> import mixin from "../mixins/mixin"; let { num, fav, favBtn } mixin(…

椭球面系列---射线与椭球面的交点

射线与椭球体的交点问题的求解是一个非常常见和经典的问题&#xff0c;本文给出具体的计算原理和矩阵表达的过程&#xff0c;便于编程计算。 见下图&#xff0c;已知射线(点为 p 0 \textbf{p}_0 p0​&#xff0c;单位方向为 d \textbf{d} d)&#xff0c;那么与椭球面的交点 p …

2023-12-22 回溯算法

回溯思想 回溯模版三部曲&#xff1a; ① 回溯函数模版返回值以及参数 ② 回溯终止条件 ③ 回溯搜索的遍历过程 分析完过程&#xff0c;回溯算法模板框架如下&#xff1a; void backtracking(参数) {if (终止条件) {存放结果;return;}for (选择&#xff1a;本层集合中元素&…

Autosar CAN开发02(入门Autosar)

Autosar架构 想起当时刚毕业进入公司之后&#xff0c;我的岗位是Autosar Bsw软件工程师。 看着这个什么“Autosar”&#xff0c;真的是一脸懵。 后来才知道&#xff0c;按照我的理解&#xff1a;Autosar就是一个软件架构。它分为ASW和BSW。ASW负责实现应用层功能&#xff08…

说个真事,裁员真的会降本增笑

最近互联网公司放烟花的次数有些高&#xff0c;基本都扎堆 Q3~Q4 出现各类事件/事故。吃瓜都快跟不上了。 作为互联网民工&#xff0c;为什么裁员后会导致降本增笑呢&#xff1f;今天我们一起来聊聊。 各种事故烟花 现阶段各大厂都领上号了&#xff0c;阿里先崩&#xff0c;…

CEC2013(python):六种算法(RFO、PSO、CSO、WOA、DBO、ABC)求解CEC2013

一、六种算法简介 1、红狐优化算法RFO 2、粒子群优化算法PSO 3、鸡群优化算法CSO 4、鲸鱼优化算法WOA 5、蜣螂优化算法DBO 6、人工蜂群算法 &#xff08;Artificial Bee Colony Algorithm, ABC&#xff09; 二、6种算法求解CEC2013 &#xff08;1&#xff09;CEC2013简…