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;});