• 135235

    文章

  • 827

    评论

  • 13

    友链

  • 最近新加了换肤功能,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

微信小程序 - 选择图片和图片预览、删除图片

2年想跳槽阿里,大咖揭秘大厂面试的那些事儿 >>

小程序开发中你可能会遇到上传的图片首先会选择图片之后预览看下或者不满意需要删除图片,才会提交吧,这样应该是一个比较好的处理方式。

微信小程序使用 wx.chooseImage 从本地相册选择图片或使用相机拍照。

wxml 代码:

  <view class='itimg'>
    <view class="item" wx:for="{{images}}" wx:key="">
      <image style="" class='itemimg' src="{{item}}" data-src='{{item}}' bindtap="previewImage" mode="aspectFill" />
      <!-- 删除按钮 -->
      <view class="delete" bindtap="deleteImg" data-index="{{index}}">
        <image src="../../images/delete-round.png" class="deleteimg"></image>
      </view>
    </view>
    <view class="add_image" bindtap='addphoto'>
      <image class="add" src="../../images/add.png"></image>
    </view>
  </view>

js代码:

  //选择上传图片
  addphoto: function () {
    var that = this
    // 选择图片
    wx.chooseImage({
      count: 1, // 默认9
      sizeType: ['compressed'],//压缩图
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
      success: function (res) {
        // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
        var filePath = res.tempFilePaths[0];//tempFilePaths类型StringArray,图片的本地文件路径列表
        that.setData({
          images: that.data.images.concat(filePath)
        });
      }
    })
  },

预览图片使用 wx.previewImage

  // 预览图集
  previewImage: function (e) {
    var that = this
    var src = e.currentTarget.dataset.src;//获取data-src
    // 预览图集
    wx.previewImage({
      current: src, // 当前显示图片的http链接  
      urls: that.data.images// 需要预览的图片http链接列表  
    });
  },

删除图片:

  //删除图片
  deleteImg: function (e) {
    var that = this
    var index = e.currentTarget.dataset.index;
    var images = that.data.images;
    images.splice(index, 1); //从数组中删除index下标位置,指定数量1,返回新的数组
    that.setData({
      images: images,
    });
  },

功能实现其实很简单,需要大家好好看下小程序 API 即可,参考以上思路实现起来很简单。

 

水平有限,若有问题请留言交流!

互相学习,共同进步:) 转载请注明出处谢谢!


 转载至链接:https://my.oschina.net/hp2017/blog/1831519


695856371Web网页设计师②群 | 喜欢本站的朋友可以收藏本站,或者加入我们大家一起来交流技术!

0条评论

Loading...


发表评论

电子邮件地址不会被公开。 必填项已用*标注

自定义皮肤 主体内容背景
打开支付宝扫码付款购买视频教程
遇到问题联系客服QQ:419400980
注册梁钟霖个人博客