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


    //没有处理的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,也就是上一篇,正好让内容衔接以下

  • 相关阅读:
    js判断正则匹配
    手机号正则匹配
    php获取图片宽高等属性
    百度分享如何自定义分享url和内容?
    nginx 解决400 bad request 的方法(转载)
    php怎么解析utf-8带BOM编码的json数据,php解析json数据返回NULL
    C#求和
    C#索引器
    LeetCode刷题笔记-递归-路径总和
    LeetCode刷题笔记-递归-将有序数组转换为二叉搜索树
  • 原文地址:https://www.cnblogs.com/naturl/p/9492745.html
Copyright © 2020-2023  润新知