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();
你当前的代码存在几个问题,导致前端没有得到上传文件的返回值:
- 异步操作未等待:你在循环中调用了
uploadFile
,但没有等待这些异步操作完成。因此,while
循环会立即执行,而不是等待所有文件上传完成。 - 无限循环:
while (true)
会导致无限循环,这会阻塞主线程,使得小程序无法响应其他事件。 - 数据更新问题:
setData
是异步的,你在循环中更新fileResult
,但这个更新可能不会立即反映在that.data
中。
为了解决这些问题,你可以使用 Promise.all
来等待所有上传操作完成,而不是使用 while
循环。以下是修改后的代码:
//上传附件wx.showLoading({title: '文件上传中...',mask: true // 是否显示透明蒙层,防止触摸穿透,默认:false});const {fileList} = that.data;that.setData({"fileResult": []});console.log("开始处理附件上传");// 创建一个数组来存储所有的上传 Promiseconst 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;});
相关文章:
VUE + 小程序 关于前端循环上传附件页面卡死的问题
最开始我使用for循环,后端能正常保存,但是前端页面卡死了,开始代码是这么写的 wx.showLoading({title: 文件上传中...,mask: true // 是否显示透明蒙层,防止触摸穿透,默认:false});const {fileList} that.…...

【基础算法总结】分治—归并
分治—归并 1.排序数组2.交易逆序对的总数3.计算右侧小于当前元素的个数4.翻转对 点赞👍👍收藏🌟🌟关注💖💖 你的支持是对我最大的鼓励,我们一起努力吧!😃😃 1.排序数组 …...

基于Java+SpringMvc+Vue技术的实验室管理系统设计与实现(6000字以上论文参考)
博主介绍:硕士研究生,专注于信息化技术领域开发与管理,会使用java、标准c/c等开发语言,以及毕业项目实战✌ 从事基于java BS架构、CS架构、c/c 编程工作近16年,拥有近12年的管理工作经验,拥有较丰富的技术架…...

19_谷歌GoogLeNet(InceptionV1)深度学习图像分类算法
1.1 简介 GoogLeNet(有时也称为GoogleNet或Inception Net)是一种深度学习架构,由Google的研究团队在2014年提出,主要设计者为Christian Szegedy等人。这个模型是在当年的ImageNet大规模视觉识别挑战赛(ILSVRC…...

clickhouse高可用可拓展部署
clickhouse高可用&可拓展部署 1.部署架构 1.1高可用架构 1.2硬件资源 部署服务 节点名称 节点ip 核数 内存 磁盘 zookeeper zk-01 / 4c 8G 100G zk-02 / 4c 8G 100G zk-03 / 4c 8G 100G clikehouse ck-01 / 32c 128G 2T ck-02 / 32c 128G 2T ck-03 / 32c 128G 2T ck-04 /…...

QT中QDomDocument读写XML文件
一、XML文件 <?xml version"1.0" encoding"UTF-8"?> <Begin><Type name"zhangsan"><sex>boy</sex><school>Chengdu</school><age>18</age><special>handsome</special>&l…...

sql盲注
文章目录 布尔盲注时间盲注 布尔盲注 介绍:在网页只给你两种回显的时候是用,类似于布尔类型的数据,1表示正确,0表示错误。 特点:思路简单,步骤繁琐且麻烦。 核心函数: length()函数substr()函…...

星网安全产品线成立 引领卫星互联网解决方案创新
2024年6月12日,盛邦安全(688651)成立星网安全产品线,这是公司宣布全面进入以场景化安全、网络空间地图和卫星互联网安全三大核心能力驱动的战略2.0时代业务落地的重要举措。 卫星互联网技术的快速发展,正将其塑造为全球…...
Adam自适应动量优化算法
Adam(Adaptive Moment Estimation)是一种结合了动量法和自适应学习率思想的优化算法,特别适用于训练神经网络和深度学习模型。以下是对Adam调整学习率的详细介绍及具体例子。 一、Adam调整学习率介绍 自适应学习率: Adam算法的核…...
Mac OS系统中Beyond Compare 4破解方式
文章出处 https://blog.csdn.net/qq_42418042/article/details/137544113 前言 记录实操过程,以防以后找不到了~ 实际原理是启动时删除文件,实现无限试用 实操过程 下载安装包 官网链接 https://www.scootersoftware.com/download.php 解压、移动到应…...

6000元最好的家用投影仪:当贝X5S Pro六千元配置最高画质最强
数码家电品牌发展迅速,投影同样也是一种更新迭代较快的产品类型,有时候去年还比较火的产品,今年就会被别的产品取代,就比如之前灯泡投影一直被认为是好产品的代表,但是现在国产激光投影的销量反而更高。一般来说6000元…...

#### golang中【堆】的使用及底层 ####
声明,本文部分内容摘自: Go: 深入理解堆实现及应用-腾讯云开发者社区-腾讯云 数组实现堆 | WXue 堆(Heap)是实现优先队列的数据结构,Go提供了接口和方法来操作堆。 应用 package mainimport ("container/heap&q…...

OpenAI Gym Atari on Windows
题意:在Windows系统上使用OpenAI Gym的Atari环境 问题背景: Im having issues installing OpenAI Gym Atari environment on Windows 10. I have successfully installed and used OpenAI Gym already on the same system. It keeps tripping up when t…...
Java进阶----接口interface
接口 接口概述 接口是一种规范,使用接口就代表着要在程序中制定规范. 制定规范可以给不同类型的事物定义功能,例如: 利用接口,给飞机、小鸟制定飞行规范,让其都具备飞行的功能;利用接口,给鼠…...
【网络协议】ISIS
ISIS IS-IS(Intermediate System to Intermediate System,中间系统到中间系统)协议是一种用于在自治系统(AS)内部进行路由选择的链路状态路由协议。它最初是为OSI(开放系统互连)网络设计的&…...

一.4 处理器读并解释储存在内存中的指令
此刻,hello.c源程序已经被编译系统翻译成了可执行目标文件hello,并被存放在硬盘上。要想在Unix系统上运行该可执行文件,我们将它的文件名输入到称为shell的应用程序中: linux>./hello hello, world linux> shell是一个命令…...

【Android面试八股文】Android性能优化面试题:怎样检测函数执行是否卡顿?
文章目录 卡顿一、可重现的卡顿二、不可重现的卡顿第一种方案: 基于 Looper 的监控方法第二种方案:基于 Choreographer 的监控方法第三种方案:字节码插桩方式第四种方案: 使用 JVMTI 监听函数进入与退出总结相关大厂的方案ArgusAPMBlockCanaryQQ空间卡慢组件Matrix微信广研参…...
C语言7 控制语句
目录 1. 条件语句 if 语句 if-else 语句 if-else if-else 语句 switch 语句 2. 循环语句 for 循环 while 循环 do-while 循环 3. 跳转语句 break 语句 continue 语句 return 语句 goto 语句 1. 条件语句 if 语句 if语句根据给定条件的真或假来决定是否执行某段…...

go mod 依赖管理补充2
依赖包的版本问题,别的开发语言有没有类似的问题?是怎么解决的? 举例:java java的依赖包的版本问题,通过Maven模块来操作,可以指定依赖包版本号,如下: go.mod 文件 go.mod文件是G…...
【Git】取消追踪多个文件或目录
文章目录 场景方法1. 添加到 .gitignore2. 从暂存区移除 示例1. 编辑 .gitignore 文件2. 从暂存区移除文件或目录 场景 清理:不再希望某些文件被 Git 追踪。配置忽略文件:通常配合 .gitignore 文件使用,以便以后这些文件不会被重新添加到索引…...
Linux链表操作全解析
Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表?1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...
线程与协程
1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指:像函数调用/返回一样轻量地完成任务切换。 举例说明: 当你在程序中写一个函数调用: funcA() 然后 funcA 执行完后返回&…...
生成 Git SSH 证书
🔑 1. 生成 SSH 密钥对 在终端(Windows 使用 Git Bash,Mac/Linux 使用 Terminal)执行命令: ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" 参数说明: -t rsa&#x…...
什么是EULA和DPA
文章目录 EULA(End User License Agreement)DPA(Data Protection Agreement)一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA(End User License Agreement) 定义: EULA即…...
【C语言练习】080. 使用C语言实现简单的数据库操作
080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码:使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出:5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...
汇编常见指令
汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX(不访问内存)XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...

基于Springboot+Vue的办公管理系统
角色: 管理员、员工 技术: 后端: SpringBoot, Vue2, MySQL, Mybatis-Plus 前端: Vue2, Element-UI, Axios, Echarts, Vue-Router 核心功能: 该办公管理系统是一个综合性的企业内部管理平台,旨在提升企业运营效率和员工管理水…...
uniapp 字符包含的相关方法
在uniapp中,如果你想检查一个字符串是否包含另一个子字符串,你可以使用JavaScript中的includes()方法或者indexOf()方法。这两种方法都可以达到目的,但它们在处理方式和返回值上有所不同。 使用includes()方法 includes()方法用于判断一个字…...
探索Selenium:自动化测试的神奇钥匙
目录 一、Selenium 是什么1.1 定义与概念1.2 发展历程1.3 功能概述 二、Selenium 工作原理剖析2.1 架构组成2.2 工作流程2.3 通信机制 三、Selenium 的优势3.1 跨浏览器与平台支持3.2 丰富的语言支持3.3 强大的社区支持 四、Selenium 的应用场景4.1 Web 应用自动化测试4.2 数据…...

【Veristand】Veristand环境安装教程-Linux RT / Windows
首先声明,此教程是针对Simulink编译模型并导入Veristand中编写的,同时需要注意的是老用户编译可能用的是Veristand Model Framework,那个是历史版本,且NI不会再维护,新版本编译支持为VeriStand Model Generation Suppo…...