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

Posted 2020-12-30 往事，只是隔岸的风景

//没有处理的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>

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，也就是上一篇，正好让内容衔接以下