小程序上传图片,排队上传
//没有处理的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,也就是上一篇,正好让内容衔接以下
本文来自博客园,作者:时光凉忆,转载请注明原文链接:https://www.cnblogs.com/naturl/p/9492745.html
分类:
微信小程序
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· [翻译] 为什么 Tracebit 用 C# 开发
· 腾讯ima接入deepseek-r1,借用别人脑子用用成真了~
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· DeepSeek崛起:程序员“饭碗”被抢,还是职业进化新起点?
· RFID实践——.NET IoT程序读取高频RFID卡/标签