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;
            });
相关推荐
dr李四维6 分钟前
iOS构建版本以及Hbuilder打iOS的ipa包全流程
前端·笔记·ios·产品运营·产品经理·xcode
雯0609~27 分钟前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ31 分钟前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z36 分钟前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
星星会笑滴40 分钟前
vue+node+Express+xlsx+emements-plus实现导入excel,并且将数据保存到数据库
vue.js·excel·express
彭世瑜1 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund4041 小时前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish1 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue
小五Five1 小时前
TypeScript项目中Axios的封装
开发语言·前端·javascript
小曲程序1 小时前
vue3 封装request请求
java·前端·typescript·vue