登录/注册

首页 小程序资讯 小程序如何实现多图上传、图片预览效果?(代码示例)

小程序如何实现多图上传、图片预览效果?(代码示例)

白衣酒客

2018/11/14 21:12

935

多图,示例,如何实现,预览,效果

本篇文章给大家带来的内容是介绍小程序如何实现多图上传、图片预览效果?(代码示例) 。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

wxml代码:

 <view class="weui-cell">   <view class="weui-cell__bd">
    <view class="weui-uploader">
      <view class="weui-uploader__hd">
        <view class="weui-uploader__title">点击可预览选好的图片</view>
        <view class="weui-uploader__info">{{pics.length}}/9</view>
      </view>
      <view class="weui-uploader__bd">
        <view class="weui-uploader__files">
          <block wx:for="{{pics}}" wx:for-item="image">
            <view class="weui-uploader__file">
              <image class="weui-uploader__img" src="{{image}}" src="{{image}}" bindtap="previewImage"></image>
            </view>
          </block>
        </view><view class="delete-btn" data-index="{{index}}" catchtap="deleteImg"></view>
        <!-- isShow 这个是判断是否进行触发点隐藏操作 -->
        <view class="weui-uploader__input-box {{isShow?'true':'hideTrue'}}">
          <view class="weui-uploader__input" bindtap="chooseImage"></view>
        </view>
      </view>
    </view>
  </view></view>

wxss代码:

page {
  line-height: 1.6;
  font-family: -apple-system-font, "Helvetica Neue", sans-serif;
}
icon {
  vertical-align: middle;
}
.weui-cell {
  padding: 10px 15px;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  align-items: center;
}
.weui-cell_input {
  padding-top: 0;
  padding-bottom: 0;
}
.weui-uploader__hd {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  padding-bottom: 10px;
  align-items: center;
}
.weui-uploader__title {
  flex: 1;
}
.weui-uploader__info {
  color: #b2b2b2;
}
.weui-uploader__bd {
  margin-bottom: -4px;
  margin-right: -9px;
  overflow: hidden;
}
.weui-uploader__file {
  float: left;
  margin-right: 9px;
  margin-bottom: 9px;
}
.weui-uploader__img {
  display: block;
  width: 79px;
  height: 79px;
}
.weui-uploader__input-box {
  float: left;
  position: relative;
  margin-right: 9px;
  margin-bottom: 9px;
  width: 77px;
  height: 77px;
  border: 1px solid #d9d9d9;
}
.weui-uploader__input-box:before, .weui-uploader__input-box:after {
  content: " ";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #d9d9d9;
}
.weui-uploader__input-box:before {
  width: 2px;
  height: 39.5px;
}
.weui-uploader__input-box:after {
  width: 39.5px;
  height: 2px;
}
.weui-uploader__input {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.hideTrue {
  display: none
}

js代码:

var app = getApp();
Page({
  data: {
    pics: [],
    count: [1, 2, 3, 4, 5, 6, 7, 8, 9],
    isShow: true
  },
  onLoad: function (options) {
    // 生命周期函数--监听页面加载
    isShow: (options.isShow == "true" ? true : false)
  },
  // 图片上传
  chooseImage: function () {
    var _this = this,
      pics = this.data.pics;
    wx.chooseImage({
      count: 9 - pics.length, // 最多可以选择的图片张数,默认9
      sizeType: ['original', 'compressed'], // original 原图,compressed 压缩图,默认二者都有
      sourceType: ['album', 'camera'], // album 从相册选图,camera 使用相机,默认二者都有
      success: function (res) {
        // success
        var imgSrc = res.tempFilePaths;   //图片路径
        pics = pics.concat(imgSrc);   //选取的图片的地址数组
        // 控制触发添加图片的最多时隐藏
        if (pics.length >= 9) {
          _this.setData({
            isShow: (!_this.data.isShow)
          })
        } else {
          _this.setData({
            isShow: (_this.data.isShow)
          })
        }
        _this.setData({
          pics: pics
        })
      },
      fail: function () {
        // fail
      },
      complete: function () {
        // complete
      }
    })
  },
  // 图片预览
  previewImage: function (e) {
    var current = e.target.dataset.src
    wx.previewImage({
      current: current,
      urls: this.data.pics
    })
  }


 // 删除图片
 deleteImg: function (e) {
  var imgs = this.data.imgs;
  var index = e.currentTarget.dataset.index;
  imgs.splice(index, 1);
  this.setData({
   imgs: imgs
  });
 },
uploadimg:function(){//这里触发图片上传的方法
       var pics=this.data.pics;
       app.uploadimg({
           url:'https://........',//这里是你图片上传的接口
           path:pics//这里是选取的图片的地址数组
        });
  },
})

在app.js中写一个多张图片上传的方法,后面引入,你也可以写在一个JS文件中,后面引入:

//多张图片上传
    function uploadimg(data){
     var that=this,
         i=data.i?data.i:0,//当前上传的哪张图片
         success=data.success?data.success:0,//上传成功的个数
         fail=data.fail?data.fail:0;//上传失败的个数
      wx.uploadFile({
            url: data.url, 
            filePath: data.path[i],
            name: 'file',//这里根据自己的实际情况改
            formData:null,//这里是上传图片时一起上传的数据
            success: (resp) => {
               success++;//图片上传成功,图片上传成功的变量+1
               console.log(resp)
                console.log(i);
                //这里可能有BUG,失败也会执行这里,所以这里应该是后台返回过来的状态码为成功时,这里的success才+1
            },
            fail: (res) => {
                fail++;//图片上传失败,图片上传失败的变量+1
                console.log('fail:'+i+"fail:"+fail);
            },
            complete: () => {
                console.log(i);
                i++;//这个图片执行完上传后,开始上传下一张
            if(i==data.path.length){   //当图片传完时,停止调用          
                console.log('执行完毕');
                console.log('成功:'+success+" 失败:"+fail);
            }else{//若图片还没有传完,则继续调用函数
                console.log(i);
                data.i=i;
                data.success=success;
                data.fail=fail;
                that.uploadimg(data);
            }
                
            }
        });
    }

效果图,可点击放大预览:

小程序如何实现多图上传、图片预览效果?(代码示例)

总结:以上就是本篇文章的全部内容,希望能对大家的学习有所帮助。

以上就是小程序如何实现多图上传、图片预览效果?(代码示例)的详细内容,更多请关注php中文网其它相关文章!

小程序资讯推荐

百度推“小度扫描”小程序 一秒可转文几万字

12月06日 16:55站长之家(ChinaZ.com) 12月5日 消息:不少人在工作和学习中都需要用到图片文字识别工具,日前百度官方宣布新推出了微信小程序“小度扫描”,用手机就可以把图片中的文字复制出来,据称扫图一秒钟就可………

微信小程序到底有哪些优点?以至于让阿里百度头条美团都来凑热闹

12月06日 16:55可以调用比H5更多的手机系统功能来进行开发,例如GPS定位、录音、拍视频、重力感应等,能开发更丰富的使用场景。 微信小程序的运营初期,很多用户对于微信小程序都会抱有一定的好奇心理,这段时间内企业借助小程序可………

为什么互联网营销部门要把握住现在的小程序?

12月06日 16:55现在互联网营销企业越来越多,企业对于营销的需求也却来越高,因为它直接会影响到我们产品的销售,传统企业也需要互联网转型,在整个过程中我们需要紧跟时代的脚脖,不断的打造一些全新的产品,了解一些新的互联网营销方式,………

华为快应用推出新工具:微信小程序可直接转换成快应用

12月06日 16:55一方面,已经形成一定用户规模的APP在应用商店上架“即点即用”的快应用欲望不大,而另一方面,在每月的流量扶持计划中,中小开发者也很难露脸,以10月份入选快应用流量扶持计划的产品为例,淘票票、智行火车票、………

图片怎么转成文字?手机里这2个免费功能太强大了,秒变扫描仪

12月06日 16:55利用“扫一扫”,小编随手添加了张杂志图片,很快就能提取出图片中的文字,而且准确度高! 微信小程序可是个好东西,为我们拓展了许多非常好用的功能,提取图片中的文字自然也不例外。 迅捷文字识别还能进行票证………

小程序、O2O系统、商家、,三者怎样有效的结合起来?

12月06日 16:55究其原因是他们能够拥有外卖送餐人员,可以提供快速有效的服务,可以帮商家和用户节省时间和部分金钱,但是微信显然不会做这种事情,如果需要做O2O服务,那么如何进行配送或许是另一个难点,针对这一块,或许可以有人尝试………

佛山科睿(金蝶精斗云)联合仁和会计《财务创造利润》公益课程

12月06日 16:55因此,为了助力中小企业做好税务筹划工作,有效防范财税风险,并真正实现让财务创造利润,仁和会计教育受邀佛山科睿(金蝶)服务中心,于11月24日为大家带来了一场别开生面的公益讲座——《中小企业财税漏洞及………

v血拼V店主的“网变之路”

12月06日 16:55那时是东莞这个“世界工厂”的黄金年代,制造业蒸蒸日上,工人成千上万,她的成衣店1年的时间就开了3家。 然而随着移动互联网时代的到来,她发现即使自己多努力,也无法避免实体店经营的下滑,她的店从5家缩减为………

“百年老店”们怎样才能满足年轻人对于吃的花式需求?

12月06日 16:55不能站在用户角度为用户节省时间和精力的不会被优先选择(记住自己是和全城店家被用户做对比,移动互联网时代是用户市场) 用户的每个细分需求都可以成为一个构建场景,只有把用户当一个完整的人对待………

微信小程序如何渲染html内容(示例讲解)

12月06日 16:54本篇文章给大家带来的内容是关于微信小程序如何渲染html内容(示例讲解),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。最近又做了一个新的小程序关于物流订单查询遇到了一个小问题:数据中……

砍价微信小程序,如何让客户把自己的产品推出去

12月05日 17:19其实更重要是商家的一些经营思维要转换,现在的商家即使有了线上的平台但是如果不搞活动进行营销裂变,是没有流量会进来的,而最简单有效的方法就是通过一些砍价活动,拼团活动来把人吸引进来,然后通过这个产品的一些优惠力………

远丰电商丨为什么品牌商纷纷搭建商城小程序?

12月05日 17:19商城小程序与微信公众号是一种访问的关系,用户在阅读微信公众号文章时可以直接跳转到小程序上。 从各方面来看借助商城小程序,品牌方可以在微信社交及大数据的基础上,完善营销方式,有针对性的进行营销活动,提………

微信小程序怎么制作,个人5分钟制作微信小程序开发教程

12月05日 17:19随着小程序开发市场的完善,现在利用微冰小程序制作平台,不需要编程开发技术,个人也能可视化制作小程序了,最快5分钟制作微信小程序,轻松应对各行各业的应用场景。这些模板都是根据市场主流小程序页面设计而成的,用户可………

喜推打造“双核智能小程序+电销机器人”神器,引爆B端市场

12月05日 17:19例如,小方如果使用了喜推系统,其跟进客户的过程将自动保留,例如沟通的话术、在什么时候对客户进行了哪些行为。通过这些留存的记录和数据,就可以复现小方跟进客户的整个流程,企业只需要将这些话术或者跟进客户的方………

小程序流量变现,有哪些新玩法?(1)

12月05日 17:19(2)兴趣以及爱好:这应该是很多社群都喜欢而且效果最好的一种方式了,因为有同样喜好的用户,看到有共鸣的东西,都会很乐意去分享。 如果你能策划一次行之有效的活动,然后再去和公众号的推文,还有朋友圈以及………

QuestMobile移动互联网全景流量洞察:移动全用户时代正式来临,凭什么突围?

12月05日 17:19此前的行业分析,往往盯着巨头应用、用户和时长,忘记了一个重要的问题:移动互联网的本质并非社交、搜索、电商、资讯等等,而是移动+服务。 移动互联网全景流量,指某应用及服务通过APP、小程序、快应用、W………

餐饮行业入驻小程序生态圈能带来红利吗?

12月05日 17:18微信小程序的小游戏让很多人爱上了小程序,这也为餐饮行业提供了很大的流量机会,外卖平台也搭建了属于自己的小程序,用户可以随时用小程序点餐,逐渐培养的用户习惯及简单的开发模式,已经成为了小程序的竞争力,而微………

从苏宁易购来看百度小程序和微信小程序的区别

12月05日 17:18两者都是首页下拉出现最近使用小程序,但百度app下拉后是进入全屏页面,而微信这边则是从之前的一行,变为了两行,分别有最近使用与我的小程序,从体验上来说微信也许更好,不过百度这样来操作也许是为了给更多的入………

附近的小程序功能有什么

12月05日 17:18在门店小程序中,其今天还推出了“卡券投放”能力,线下商户获取这一能力后,用户可以在“门店小程序”中领域商家的会员卡、代金券或者买单券。 第四种则是新推出的“发现”页面,利用LBS功能,用户可以发现附………

谁快谁得利 实体店如何放到小程序上运营?

12月05日 17:18商家可以通过离线扫描获得微信的在线流量,实体店行业将小程序二维码放在实体店中,以便消费者可以更好地使用它,你可以知道商店的细节,我相信应该有很多消费者愿意尝试。 现在小程序的发展朝超过了我们的预期,面………

Copyright © 2016-2018 中国小程序 版权所有   网站地图

商务合作:897834588@qq.com