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

首先来写好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)
        })
      }
    })
  }
})

使用情况如下：