微信小程序> 微信小程序调用相册和相机

微信小程序调用相册和相机

浏览量:665 时间: 来源:impossible1994727

首先来写好wxml部分:给一个图片列表(img_list)和上传图片的按钮(addimg)

view class="container"  view class='img_body'    view class='img_list'      view class='img_li' wx:for="{{imglist}}" wx:key="{{index}}"        image src="{{item}}"/image      /view      view class='addimg' bindtap='img_w_show'        image src='../../img/add.png'/image      /view    /view  /view/view

css部分控制如下:

.img_list{width: 100vw;display: flex;display: -webkit-flex;  padding: 0 20rpx;  box-sizing: border-box;  flex-wrap: wrap;  -webkit-flex-wrap:wrap;}.img_list .img_li,.addimg{width: 200rpx;height: 250rpx;border: 1px solid #999999;  margin: 5rpx;  flex-shrink: 0;  -webkit-flex-shrink:0;}.addimg image{width: 150rpx;height: 150rpx;margin: 50rpx 25rpx;}.img_list .img_li image{  width: 100%;  height: 100%;}

如果只是想调用下面这个弹窗,微信小程序调用的api是wx.showActionSheet,

代码如下:

wx.showActionSheet({  itemList: ['从手机相册选择', '拍照'],  success: function(res) {    console.log(res.tapIndex)  },  fail: function(res) {    console.log(res.errMsg)  }})

调用的图如下:

 

但是,我们是要实现功能的丫

在我的js文件里面先在data里面命名imglist为空数组

然后调用img_w_show函数:

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

使用情况如下:

版权声明

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

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

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