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("开始处理附件上传");// 创建一个数组来存储所有的上传 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;});

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Nginx理论篇与相关网络协议

Nginx是什么? Nginx是一款由C语言编写的高性能、轻量级的web服务器,一个线程能处理多个请求,支持万级并发。 优势:I/O多路复用。 I/O是什么? I指的是输入(Input),O是指输出(Outp…

【HarmonyOS NEXT】鸿蒙线程安全容器集collections.ArrayBuffer

collections.ArrayBuffer ArkTS TypedArray的底层数据结构。 属性 系统能力: SystemCapability.Utils.Lang 元服务API: 从API version 12开始,该接口支持在元服务中使用。 名称类型只读可选说明byteLengthnumber是否buffer所占的字节数。…

【安全设备】日志审计

一、什么是日志审计 日志审计是一站式的日志数据管理平台,主要致力于提供事前预警、事后审计的安全能力, 通过对日志数据的全面采集、解析和深度的关联分析,及时发现各种安全威胁和异常行为事件。日志审计是指通过集中采集信息系统中的各类信…

解决:Android Studio 突然打不开!提示Failed to create JVM:error code -1

Android studio1.5 一直用得好好的,突然有一天打不开,并提示: 可是系统配置中,java的配置也是正常的。 解决方法: 修改安装目录下的studio64.exe.vmoptions 文件 直接将文件内容改成: -Xms128m -Xmx512m…

谷歌+火狐浏览器——实现生成二维码并实现拖动——js技能提升

最新遇到的问题:前两个二维码拖动不了,只有第三个一维码生成后,才可以拖拽 【问题】:出现在都是绝对定位,但是没有指定z-index导致的。 解决办法:在方法中添加一个变量 renderDrag(id) {var isDragging f…

2024.7.9总结

今天真的要气炸了。本来想安装个pycharm学学python的,谁知,家里的电脑被姐夫搬走了,然后,在自己的笔记本下载安装出现特别多问题,主要是启动失败,不知道是不是之前删了一些不该删的文件。然后那个DLL错误修…

Python 3 AI 编程助手

Python 3 AI 编程助手 Python 3 是当前最流行的编程语言之一,特别是在人工智能(AI)领域。Python 3 的语法简洁明了,拥有丰富的库和框架,使其成为开发 AI 应用程序的首选语言。本文将介绍 Python 3 在 AI 编程中的关键特性、常用库以及如何使用 Python 3 构建 AI 应用程序…

Python CuPy库:GPU加速的科学计算

更多Python学习内容:ipengtao.com 在数据科学和机器学习领域,处理大规模数据集常常需要巨大的计算资源。Python的CuPy库通过提供一个类似NumPy但运行在NVIDIA GPU上的接口,大幅提升了数组操作的速度,使得复杂的数值计算变得更加高…

Three 圆柱坐标(Cylindrical)和 视锥体(Frustum)

圆柱坐标(Cylindrical) 圆柱坐标:一个点的cylindrical coordinates。英语:cylindrical coordinate system)是一种三维坐标系统。它是二维极坐标系往 z-轴的延伸。添加的第三个坐标 𝑧 专门用来表示 P 点离…

【C/C++】VSCode 插件支持

C/C基础 C/C(包括C/C IntelliSense, debugging, and code browsing.)C/C Theme:UI Themes for C/C extension.Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code llVM增强 CodeLLDB:这个插件就是安装llvm…

基于FPGA的图像边缘检测(OV5640)

一、简介 1.应用范围 边缘主要存在于图像中目标与目标之间,目标与背景之间,区域与区域之间。 边缘检测的目的就是找到图像中亮度变化剧烈的像素点构成的集合,表现出来往往是轮廓。如果图像中边缘能够精确的测量和定位,那么&…

GaussDB关键技术原理:高性能(四)

GaussDB关键技术原理:高性能(三)从查询重写RBO、物理优化CBO、分布式优化器、布式执行框架、轻量全局事务管理GTM-lite等五方面对高性能关键技术进行了解读,本篇将从USTORE存储引擎、计划缓存计划技术、数据分区与分区剪枝、列式存…

SQLServer设置端口

要在SQL Server中设置端口,您需要修改配置文件sqlserver.ini。请按照以下步骤操作: 找到SQL Server的安装目录。通常情况下,它位于C:\Program Files\Microsoft SQL Server\MSSQLxx.InstanceName,其中xx是SQL Server的版本号&#…

Redis 7.x 系列【19】管道

有道无术,术尚可求,有术无道,止于术。 本系列Redis 版本 7.2.5 源码地址:https://gitee.com/pearl-organization/study-redis-demo 文章目录 1. 往返时间2. 管道技术3. 代码演示4. 其他批处理4.1 原生批处理命令4.2 事务4.3 脚本…

240708_昇思学习打卡-Day20-MindNLP ChatGLM-6B StreamChat

240708_昇思学习打卡-Day20-MindNLP ChatGLM-6B StreamChat 基于MindNLP和ChatGLM-6B实现一个聊天应用,本文进行简单记录。 环境配置 %%capture captured_output # 实验环境已经预装了mindspore2.2.14,如需更换mindspore版本,可更改下面mi…

ArkTs基础入门

ArkTs基础入门 文章目录 一、 (方舟开发框架)ArkUI介绍二、自定义组件三、组件事件及使用弹出框分割线Text文本TextInput文本输入框Image图片Column列Row行Button按钮 一、 (方舟开发框架)ArkUI介绍 方舟开发框架(简称:ArkUI),是…

Java | Leetcode Java题解之第224题基本计算器

题目&#xff1a; 题解&#xff1a; class Solution {public int calculate(String s) {Deque<Integer> ops new LinkedList<Integer>();ops.push(1);int sign 1;int ret 0;int n s.length();int i 0;while (i < n) {if (s.charAt(i) ) {i;} else if (s…

实施OPC UA网关以加速设备与MES系统之间的连接

在现代工业自动化中&#xff0c;信息化和智能化已成为企业提升竞争力的关键因素&#xff0c;为了实现生产过程的自动化和管理的高效化&#xff0c;工业自动化系统&#xff08;如OPC UA&#xff09;与制造执行系统&#xff08;MES&#xff09;的集成变得尤为重要。OPC UA&#x…

Pycharm 出现sdk is not defined for run configuration解决办法

第一步&#xff1a;运行->编辑配置 第二部&#xff1a;重新选择一下脚本路径和Python解释器 第三步&#xff1a;保存。重新运行

WebKit简介及其神秘的工作流程

在信息时代的巨浪中&#xff0c;互联网已经深深地渗透到了我们生活的每一个角落。作为连接我们与这个庞大网络世界的桥梁&#xff0c;网页浏览器无疑成为了我们生活中不可或缺的一部分。而在这些浏览器的背后&#xff0c;往往隐藏着一些强大而神秘的引擎&#xff0c;它们为浏览…