VUE + 小程序 关于前端循环上传附件页面卡死的问题

最开始我使用for循环,后端能正常保存,但是前端页面卡死了,开始代码是这么写的

    wx.showLoading({
              title: '文件上传中...',
              mask: true // 是否显示透明蒙层,防止触摸穿透,默认:false
            });
            const {
              fileList
            } = that.data;
            that.setData({
              "fileResult": []
            });
            console.log("开始处理附件上传");
            for (var file of fileList) {
              uploadFile({
                "folder": "carfj",
                "fjlxdm": "CARFJ",
                "ywid": pkid
              }, file).then(res => {
                console.log("得到上传成功后的数据");
                console.log(res);
                const {
                  fileResult
                } = that.data;
                fileResult.push(res);
                that.setData({
                  "fileResult": fileResult
                });
              });
            }
            console.log("上传结果检查中...");
            while (true) {
              const {
                fileList,
                fileResult
              } = that.data;
              if (fileList.length == fileResult.length) {
                break;
              }
            }
            wx.hideLoading();
 

你当前的代码存在几个问题,导致前端没有得到上传文件的返回值:

  1. 异步操作未等待:你在循环中调用了 ​uploadFile​,但没有等待这些异步操作完成。因此,​while​ 循环会立即执行,而不是等待所有文件上传完成。
  2. 无限循环​while (true)​ 会导致无限循环,这会阻塞主线程,使得小程序无法响应其他事件。
  3. 数据更新问题​setData​ 是异步的,你在循环中更新 ​fileResult​,但这个更新可能不会立即反映在 ​that.data​ 中。

为了解决这些问题,你可以使用 ​Promise.all​ 来等待所有上传操作完成,而不是使用 ​while​ 循环。以下是修改后的代码:

//上传附件
            wx.showLoading({
              title: '文件上传中...',
              mask: true // 是否显示透明蒙层,防止触摸穿透,默认:false
            });
            const {
              fileList
            } = that.data;
            that.setData({
              "fileResult": []
            });
            console.log("开始处理附件上传");
            // 创建一个数组来存储所有的上传 Promise
            const uploadPromises = fileList.map(file => {
              return uploadFile({
                "folder": "carfj",
                "fjlxdm": "CARFJ",
                "ywid": pkid
              }, file).then(res => {
                console.log("得到上传成功后的数据");
                console.log(res);
                const {
                  fileResult
                } = that.data;
                fileResult.push(res);
                that.setData({
                  "fileResult": fileResult
                });
              });
            });
            // 等待所有上传操作完成
            Promise.all(uploadPromises).then(() => {
              wx.hideLoading();
              console.log("所有文件上传完成");


            }).catch(err => {
              console.log("文件上传失败", err);
              wx.showToast({
                title: "文件上传失败",
                icon: 'none',
                mask: true,
              });
              wx.hideLoading();
              return;
            });

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

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

相关文章

Django QuerySet对象,all()方法

all()方法 在Django中,all()方法是QuerySet对象的一个方法,用于获取模型的所有实例。 当你调用ModelName.objects.all()时,Django会生成一个SQL查询,从数据库中获取该模型的所有记录,并返回一个QuerySet对象&#xf…

【产品运营】Saas的核心六大数据

国内头部软件公司的一季度表现惨不忍睹,为啥美国的还那么赚钱呢?其实核心是,没几个Saas产品经理是看数据的,也不知道看啥数据。 SaaS 行业,天天抛头露面、名头叫的响的 SaaS 产品,真没有几个赚钱的。 那为…

中国计量大学理学院访问赛氪网:共探校企合作新篇章来

2024年7月5日,中国计量大学理学院代表团莅临环球赛乐(北京)科技有限公司,进行了一场深入的调研交流活动。代表团成员包括中国计量大学理学院副院长王义康教授、数据科学系副主任刘学艺副教授以及金世举老师。此次访问旨在进一步强…

江洲的《家书》,岂止抵万金

题记 今晨6点钟,像往日一样的背上鱼具包,欲驾乘清凉舒适的晨风,前往味江河堤享受钓翁乐趣。孰料开门一看,朦胧的天空竟下着淅淅沥沥的小雨。 今年的天气异常,是笔者寄居“西川第一天”古镇5年来所未见:再…

stm32——外部中断EXTI

上回书说到定时器的级联,今天来谈谈外部中断EXTI。我使用的是STM32F103C8T6的学习板。仅供大家参考。 什么是中断呢?中断是指计算机在执行程序的过程中,当出现某些异常情况或特殊事件(例如外部设备请求、定时时间到达、程序错误等…

YOLOV8花朵实例分割实战

原文:YOLOV8花朵实例分割实战 - 知乎 (zhihu.com) 一、代码: https://github.com/ultralytics/ultralytics​github.com/ultralytics/ultralytics 与先前几个版本相比,YOLOv8 模型更快、更准确,同时为训练模型提供统一框架,以执行以下基本任务: 目标检测;实例分割;图…

奇安信20240513笔试

题目一 解题思路 n转为字符串,如果位数为偶数,取前一半设为x,后一段为y,从x最低位开始,9,9*10,9*10*10。。。 到最高位,加x,如果x大于或等于y,加1. 位数为奇数…

武汉免费 【FPGA实战训练】 Vivado入门与设计师资课程

一.背景介绍 当今高度数字化和智能化的工业领域,对高效、灵活且可靠的技术解决方案的需求日益迫切。随着工业 4.0 时代的到来,工业生产过程正经历着前所未有的变革,从传统的机械化、自动化逐步迈向智能化和信息化。在这一背景下&…

全志A527 T527 cat /proc/cupinfo没有Serial问题

1.前言 我们有些客户是使用cpuinfo节点去获取系统的cpuid的,如下: cat /proc/cupinfo processor : 0 BogoMIPS : 48.00 Features : fp asimd evtstrm aes pmull sha1 sha2 crc32 atomics fphp asimdhp cpuid asimdrdm lrcpc dcpop asimddp CPU impleme…

代码随想录-Day51

115. 不同的子序列 给你两个字符串 s 和 t ,统计并返回在 s 的 子序列 中 t 出现的个数,结果需要对 109 7 取模。 示例 1: 输入:s “rabbbit”, t “rabbit” 输出:3 解释: 如下所示, 有 3 种可以从 …

基于 LlamaIndex、Claude-3.5 Sonnet 和 MongoDB,构建具有超级检索能力的智能体

节前,我们组织了一场算法岗技术&面试讨论会,邀请了一些互联网大厂朋友、今年参加社招和校招面试的同学。 针对大模型技术趋势、算法项目落地经验分享、新手如何入门算法岗、该如何准备面试攻略、面试常考点等热门话题进行了深入的讨论。 总结链接如…

Day1--每日一练

🍁 个人主页:爱编程的Tom💫 本篇博文收录专栏:每日一练-算法篇👉 目前其它专栏:c系列小游戏 c语言系列--万物的开始_ Java专栏等 🎉 欢迎 👍点赞✍评论⭐收藏&…

Java之父James Gosling宣布正式退休 创造无数人的饭碗

编程语言Java的创始人,被誉为“Java之父”的James Gosling,近日在社交媒体上宣布了自己正式退休的消息。Gosling表示:“我终于退休了。做了这么多年的软件工程师,现在是时候享受人生了。”他透露,在亚马逊的过去7年是非…

代码随想录算法训练营第四十七天|1143.最长公共子序列、 1035.不相交的线、53. 最大子序和、392.判断子序列

1143.最长公共子序列 题目链接:1143.最长公共子序列 文档讲解:代码随想录 状态:一开始没想明白为啥要 max(dp[i - 1][j], dp[i][j - 1]) 思路: 如果text1[i - 1] 与 text2[j - 1]相同,那么找到了一个公共元素&#xff…

GitLab介绍,以及add an SSH key

GitLab GitLab 是一个用于仓库管理系统的开源项目,现今并在国内外大中型互联网公司广泛使用。 git,gitlab,github区别 git 是一种基于命令的版本控制系统,全命令操作,没有可视化界面; gitlab 是一个基于git实现的在线代码仓库…

K8s驱逐场景以及规避方案参考 —— 筑梦之路

Pod 驱逐分为两种情况: 较安全驱逐 & 提高稳定性的良性驱逐 API 发起驱逐,典型案例:kubectl drain Node Not Ready 时,Controller Manager 发起的驱逐 有风险的驱逐 节点压力驱逐 节点磁盘空间不足、内存不足 或 Pid 不足&…

简易Qt串口助手

界面显示如下 关于串口类 初始化 设置串口号 设置波特率 打开串口 发送按钮功能实现 接收数据显示在控件中 关闭串口

Vortex GPGPU的硬件设计和代码结构分析

文章目录 前言一、GPGPU是什么?1.1 GPU和GPGPU之间的差异1.2 GPU和CPU之间的集成方式1.3 GPU包含什么(列举和VMIPS向量体系结构的差异) 二、Vortex GPGPU是什么?2.1 Vortex GPGPU的技术边界和验证环境2.2 Vortex GPGPU的指令集设计…

30万的剧本杀店 被“好色”店长玩死了

文|琥珀食酒社 作者 | 朱珀 对开店搞钱的人来讲 什么才是最苦逼的? 不是一开始生意就不行 而是刚开始好到不行 最后只剩下不行 本期投稿的主人公糊糊 就是这样的 苦逼大BOSS 30万开剧本杀店 短短几个月 从巅峰跌到谷底 被捞钱又好色的猪队友…

C++ 类和对象 拷贝构造函数

一 拷贝构造函数的概念: 拷贝构造函数是一种特殊的构造函数,用于创建一个对象是另一个对象的副本。当需要用一个已存在的对象来初始化一个新对象时,或者将对象传递给函数或从函数返回对象时,会调用拷贝构造函数。 二 拷贝构造函…