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

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

代码如下：

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

调用的图如下：

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

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

然后调用img_w_show函数：

使用情况如下：