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


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

    1. wx.showLoading({
    2. title: '文件上传中...',
    3. mask: true // 是否显示透明蒙层,防止触摸穿透,默认:false
    4. });
    5. const {
    6. fileList
    7. } = that.data;
    8. that.setData({
    9. "fileResult": []
    10. });
    11. console.log("开始处理附件上传");
    12. for (var file of fileList) {
    13. uploadFile({
    14. "folder": "carfj",
    15. "fjlxdm": "CARFJ",
    16. "ywid": pkid
    17. }, file).then(res => {
    18. console.log("得到上传成功后的数据");
    19. console.log(res);
    20. const {
    21. fileResult
    22. } = that.data;
    23. fileResult.push(res);
    24. that.setData({
    25. "fileResult": fileResult
    26. });
    27. });
    28. }
    29. console.log("上传结果检查中...");
    30. while (true) {
    31. const {
    32. fileList,
    33. fileResult
    34. } = that.data;
    35. if (fileList.length == fileResult.length) {
    36. break;
    37. }
    38. }
    39. wx.hideLoading();
     
    

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

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

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

    1. //上传附件
    2. wx.showLoading({
    3. title: '文件上传中...',
    4. mask: true // 是否显示透明蒙层,防止触摸穿透,默认:false
    5. });
    6. const {
    7. fileList
    8. } = that.data;
    9. that.setData({
    10. "fileResult": []
    11. });
    12. console.log("开始处理附件上传");
    13. // 创建一个数组来存储所有的上传 Promise
    14. const uploadPromises = fileList.map(file => {
    15. return uploadFile({
    16. "folder": "carfj",
    17. "fjlxdm": "CARFJ",
    18. "ywid": pkid
    19. }, file).then(res => {
    20. console.log("得到上传成功后的数据");
    21. console.log(res);
    22. const {
    23. fileResult
    24. } = that.data;
    25. fileResult.push(res);
    26. that.setData({
    27. "fileResult": fileResult
    28. });
    29. });
    30. });
    31. // 等待所有上传操作完成
    32. Promise.all(uploadPromises).then(() => {
    33. wx.hideLoading();
    34. console.log("所有文件上传完成");
    35. }).catch(err => {
    36. console.log("文件上传失败", err);
    37. wx.showToast({
    38. title: "文件上传失败",
    39. icon: 'none',
    40. mask: true,
    41. });
    42. wx.hideLoading();
    43. return;
    44. });

  • 相关阅读:
    Azure 深入浅出[2] --- App Service的部署并查看应用Log
    算法入门(六):归并排序
    数据分析技能点-统计量&抽样分布
    备战数学建模39-粒子群算法pso进阶应用番外篇2(攻坚战3)
    Ubuntu20.04以上 如何清理内存遇到报错如何处理[WARN]Free memory 1234(M)may be NOT ENOUGH
    41、优惠券秒杀(Redis实现全局唯一id)
    找不到msvcp140.dll的解决方法,以及msvcp140.dll丢失的原因
    DHCP部署与安全
    Github忘记了Two-factor Authentication code
    【每日刷题】Day63
  • 原文地址:https://blog.csdn.net/qq873113580/article/details/140280076