小程序上传图片，排队上传-白红宇

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

阅读量：5901 次

发布时间：2019-06-19

本文共 2134 字，大约阅读时间需要 7 分钟。

//没有处理的wxml，但是有效果，可以简单试验一下

<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>

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

你可能感兴趣的文章

XML代码生成器——XmlFactory 简介（二）

查看>>

BZOJ 5441 [Ceoi2018]Cloud computing

查看>>

Ionic + Angular + Cordova