小程序上传图片,排队上传

//没有处理的wxml,但是有效果,可以简单试验一下
<view class='minbox1'>
<text class='red wzgs'>*</text>
<text class='wzgs'>照片(点击下面方框上传)</text>
<text class='mis'>{{z}}/9</text>
</view>
<view class='left' wx:if="{{pics}}" wx:for="{{pics}}">
<image style='float:left;' class="carts-image" src="{{item}}" />
</view>
</view>
<view class='tpys'>
<image style='margin-top:-50px;' class="carts-image" bindtap="upimgall" src='/images/1.png' />
<view class='huang'></view>
<view class='border'> </view>
</view>
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
Pages({
    data:{
        count: [1, 2, 3, 4, 5, 6, 7, 8, 9],//最多上传9张,
        pics: [],
    },
    upimgall: function (e) {//方法
        var t = this,        i = t.data.pics.length,       n = t.data.count.length;
        if (n <= i) return t.showErroring("最多上传9张照片"), !1;       //选择图片
        wx.chooseImage({
          count: n - i,
          sizeType: ["compressed"],// 可以指定是原图还是压缩图,默认二者都有
          sourceType: ["album", "camera"],// 可以指定来源是相册还是相机,默认二者都有
          success: function (res) {
            var imgsrc = res.tempFilePaths;//文件上传的临时路径
            var i = res.tempFilePaths;
            var j = i.length - 1
            if (i.length > 0) {
                 var n = t.data.pics.concat(i);//按照选择图片的顺序
                 t.setData({
                    //pics: n,需要图片上传完在显示在页面,防止网络问题
                    imageArrs: n,
                });
                var r = 0, s = i.length - 1;
                for (r in i) wx.uploadFile({//确保图片上传的顺序
                    url: '',
                    filePath: i[r],
                    name: "file",
                    formData: {
                      uid:uid,
                      imgurl: i[r]
                    },
                    success: function (e) {                  //上传之后,返回来的图片路径,
                      t.data.iimages = t.data.iimages.concat(域名 + e.data);//把返回来的图片路径合并到iimages
                      t.setData({                   //把返回来的图片显示出来
                        imgs: t.data.iimages
                      })
                      r == s && wx.hideLoading();
                    }
                  });
                }
                var data = {
                  program_id: 1
                }
                t.setData({
                  z: t.data.pics.length,
                })
            }
 
        })
    }
})

如果有需要下载图片的可以看:https://www.cnblogs.com/naturl/p/9481072.html,也就是上一篇,正好让内容衔接以下

posted @   时光凉忆  阅读(975)  评论(1编辑  收藏  举报
编辑推荐:
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
阅读排行:
· [翻译] 为什么 Tracebit 用 C# 开发
· 腾讯ima接入deepseek-r1,借用别人脑子用用成真了~
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· DeepSeek崛起:程序员“饭碗”被抢,还是职业进化新起点?
· RFID实践——.NET IoT程序读取高频RFID卡/标签
点击右上角即可分享
微信分享提示