小程序,展示多张照片

chooseImage.gif

//wxml
<view class="image-list">
  <block  wx:if="{{imageList.length}}" wx:for="{{imageList}}" wx:key="this">
    <view class="envImage">
      <image class='envImage-img' src="{{item}}" mode='aspectFill'></image>
      <view class="del-container" data-imageindex="{{index}}" bindtap="delImage">
        <image class="del-icon" src="/images/del.png"></image>
      </view>
    </view>
  </block>
  <view class='chooseImg' wx:if="{{imageList.length < 9}}" bindtap='chooseImg'>
    <image src="/images/add.png" class="addIcon"></image>
  </view>
</view>

//js
data: {
    imageList:[]
},
//选择图片
  chooseImg: function() {
    var _this = this;
    wx.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success: function(res) {
            const tempFilePaths = res.tempFilePaths
            // console.log(tempFilePaths)
            wx.uploadFile({
                url: app.globalData.uploadUrl,
                filePath: tempFilePaths[0],
                name: 'file',
                header: {
                    "Content-Type": "multipart/form-data"
                },
                success(res) {
                    var data = JSON.parse(res.data);
                    var imageList = _this.data.imageList;
                    imageList.push(data.data.url)
                    _this.setData({
                      imageList: imageList
                    })
                    // console.log("图片",_this.data.imageList)
                }
            })
        }
    })

  },
//删除图片
  delImage:function(e){
    var __ = this;
    var index = e.currentTarget.dataset.imageindex;
    var imageList = __.data.imageList;
    wx.showModal({
      title: '提示!',
      content: '是否删除这张图片?',
      success(res){
        if(res.confirm) {
          imageList.forEach((item,i)=>{
            if(i == index) {
              imageList.splice(i,1)
              __.setData({
                imageList: imageList
              })
            }
          })
        }
      }
    })
  },

//wxss
.image-list{
  margin-top: 20rpx;
}
.image-list::after{
  content: '';
  display:block;
  clear: both;
}
.chooseImg{
  width: 200rpx;
  height: 160rpx;
  background: #e6e6e6;
  text-align: center;
  float: left;
}
.envImage{
  float: left;
  width: 200rpx;
  height: 160rpx;
  margin-right: 20rpx;
  margin-bottom:20rpx;
  position: relative;
}
.del-container{
  height: 40rpx;
  width: 100%;
  text-align: center;
  background: rgba(0, 0, 0, 0.7);
  position: absolute;
  bottom:0;
}
.del-icon{
  width: 30rpx;
  height: 30rpx;
}
.envImage-img{
  width: 100%;
  height: 100%;
}
.addIcon{
  width: 55rpx;
  height: 55rpx;
  margin: 52rpx auto 0;
}