Uniapp中图片上传完后再进行跳转或者其它操作的解决办法
在使用uniapp做多图片上传的时候,希望图片上传完毕后,再进行跳转,但代码写完后发现,图片尚未上传完毕后,页面已经跳转了,后来经过网上搜索,终于找到了办法。
那就是使用Promise
具体的可以参见https://juejin.cn/post/6881901884085534734
我将我的代码也贴出来,仅供参考,和之前的方法比较,主要是添加了下面红色部分的代码,其中要求
1 | tasks里面push的方法,必须是返回Promise的 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | async uploadImg() { var that = this ; let tasks = []; for ( var i = 0; i < this .piclist.length; i++) { var imgIndex = padding0(i + 1, 3); var imgName = this .userInfo.studentNo + guid() + imgIndex + ".jpg" ; var data = { "testCourseID" : this .testCourseID, "courseId" : this .courseId, "studentCode" : this .userInfo.schoolNumber, "classNum" : this .userInfo.classNumber, "imgType" : 0, "questionID" : 0, "imgSum" : this .piclist.length, "imgIndex" : i + 1, "imgName" : imgName, } console.log(i); tasks.push(that.uploadOne(data, i)); } return Promise.all(tasks).then( function (result){ console.info( "dddd" +result); uni.redirectTo({ url: "/pages/task/list" }); }); }, uploadOne(data, i) { var that = this ; return new Promise((resolve,reject)=>{ UpdateTestCouseImagePath(data).then((res) => { console.log( 'uploaded' + i + data.imgName); if (res.Status) { uni.uploadFile({ url: MP_API_URL + 'UpdateTestCouseImgOneByOne' , //仅为示例,非真实的接口地址 filePath: that.piclist[i].url, name: 'file_1' , formData: { "testCourseID" : that.testCourseID, "imgName" : data.imgName, }, success: (uploadFileRes) => { console.log( 'that.testCourseID' + that.testCourseID); var res = that.processContent(uploadFileRes.data); if (res.Status) { uni.showToast({ title: res.Msg, icon: 'none' }); resolve(); } else { uni.showToast({ title: res.Msg, icon: 'none' }); reject(); } } }); } }); }) }, |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!