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

  

posted @   sharestone  阅读(518)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!
点击右上角即可分享
微信分享提示