微信小程序> 小程序从手机相册上传图片以及图片预览

小程序从手机相册上传图片以及图片预览

浏览量:577 时间: 来源:IG_wxz

wx.chooseImage(Object object)
从本地相册选择图片或使用相机拍照。
我们先来看下它的一些属性值:
小程序
话不多说,接下来我们直接看代码。
wxml代码:

button bindtap="upload"上传照片/buttonview class="photo"  view wx:for="{{filePath}}"    image class="album" bindtap=“preview” data-id="{{item}}" wx:if="{{item != ''}}" src="{{item}}"/image  /view/view

js代码:

 data: {    filePath:'',      },   //上传照片    upload: function(e) {      var that = this;      var arr = new Array();      wx.chooseImage({      //一次性最多选择的图片张数,不写默认为9张。        count:9,        sizeType: ['original', 'compressed'],        sourceType: ['album', 'camera'],        success: function(res) {        //图片临时路径,可以作为img标签的src属性显示图片          const filePath = res.tempFilePaths;                   for(var i = 0;i  filePath.length;i++){          arr.push(filePath[i]);            }          arr = arr.concat(that.data.filePath);          that.setData({          filePath:arr        })          console.log(arr)        },      })    }    //图片预览    preview: function(e){      wx.previewImage({      current:e.target.dataset.id,      urls: this.data.filePath  })  },

你选择的照片:
小程序
点击图片预览效果:
小程序

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎