微信小程序 上传多张图片

小程序会用到一些上传的模块，这里分享一下小程序原生上传的插件，转自朋友的博客。

HTML部分：

<!-- 选择图片 --><view class='up-pic'><view class='flex pic-box'><block wx:key="imgbox" wx:for="{{imgbox}}"><view class='ap-box'><view class='add-pic'><image class='add-pic' src='{{item}}'></image><view class='img-de' data-deindex='{{index}}' bindtap='imgDelete1'><image class='img' src='/img/img/icon_close2@2x.png'></image> //右上角的删除按钮图片</view></view></view></block><view class='add-pic' bindtap='addPic1' wx:if="{{imgbox.length<9}}"><image class='img' src='/img/img/add_pic@2x.png'></image> //+号图片</view></view></view>

css部分：

.flex{ display: flex; } .up-pic{ /* padding:20rpx 24rpx; */ width: 100%; justify-content: center; } .pic-box{ margin-top:20rpx; flex-flow:wrap; width:95%; } .ap-box{ position: relative; } .add-pic{ width: 160rpx; height: 160rpx; margin-right: 20rpx; position: relative; margin: 20rpx 30rpx 20rpx 30rpx; } /* 删除图片 */ .img-de{ width:45rpx; height:45rpx; border-radius:50%; position:absolute; right:-41rpx; top:5rpx; } .hong-contant .teamwork-btn{ width: 360rpx; height: 88rpx; border-radius: 50rpx; color: white; background-color:#14a1fd; margin: 0 auto; margin-top: 80rpx; margin-bottom: 40rpx; }

js部分;

data: {imgbox:''//上传图片},

// 删除照片 &&imgDelete1: function (e) {let that = this;let index = e.currentTarget.dataset.deindex;let imgbox = this.data.imgbox;imgbox.splice(index, 1)that.setData({imgbox: imgbox});},// 上传图片 &&&addPic1: function (e) {var imgbox = this.data.imgbox;console.log(imgbox)var picid = e.currentTarget.dataset.pic;console.log(picid)var that = this;var n = 9;if (9 > imgbox.length > 0) {n = 9 - imgbox.length;} else if (imgbox.length == 9) {n = 1;}wx.chooseImage({count: n, // 默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有success: function (res) {// console.log(res.tempFilePaths)// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片var tempFilePaths = res.tempFilePathsif (imgbox.length == 0) {imgbox = tempFilePaths} else if (9 > imgbox.length) {imgbox = imgbox.concat(tempFilePaths);} else {imgbox[picid] = tempFilePaths[0];}that.setData({imgbox: imgbox});}})},