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;
            });
相关推荐
qq229511650231 分钟前
微信小程序的汽车维修预约管理系统
微信小程序·小程序·汽车
别拿曾经看以后~42 分钟前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死1 小时前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人1 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人1 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香1 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9151 小时前
【JavaScript】模块化开发
前端·javascript·vue.js