首先来写好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/viewcss部分控制如下:
.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) }) } }) }})使用情况如下:














