微信小程序选择图片控件

xml:
<loading hidden="{{loadingHidden}}">
    加载中...
</loading>
<view class="add_carimg">
    <block>
        <view class="load_iamge">
            <text class="load_head_text">上传施工车辆照片</text>
            <text class="load_foot_text">{{imgbox.length}}/2</text>
        </view>
        <view class='pages'>
            <view class="images_box">
                <block wx:key="imgbox" wx:for="{{imgbox}}">
                    <view class='img-box'>
                        <image class='img' src='{{item}}' data-message="{{item}}" bindtap="imgYu"></image>
                        <view class='img-delect' data-deindex='{{index}}' bindtap='imgDelete1'>
                            <image class='img' src='/pages/images/delete_btn.png'></image>
                        </view>
                    </view>
                </block>
                <view class='img-box' bindtap='addPic1' wx:if="{{imgbox.length<2}}">
                    <image class='img' src='/pages/images/load_image.png'></image>
                </view>
            </view>
        </view>
    </block>
</view>
<view>
    <button class="work_btn" bindtap="shanggang">上岗</button>
</view>

css:

.work_btn {
  width: 60%;
  height: 35px;
  line-height: 35px;
  margin-top: 15px;
  border-radius: 5px;
  font-size: 30rpx;
  color: white;
  background-color: rgb(2, 218, 247);
}

.work_btn:active {
  width: 60%;
  height: 35px;
  line-height: 35px;
  margin-top: 15px;
  border-radius: 5px;
  font-size: 30rpx;
  color: white;
  background-color: rgb(151, 222, 231);
}






/*********/

.load_iamge {
  width: 100%;
  height: 30px;
  margin-top: 10px;
  display: flex;
  flex-direction: row;
}

.load_head_text {
  width: 95%;
  height: 20px;
  margin-bottom: 5px;
  margin-top: 5px;
  

}

.load_foot_text {
  width: 5%;
  height: 20px;
  margin-right: 15px;
  margin-top: 5px;
  margin-bottom: 5px;
  float: right;

}

.pages {
  width: 98%;
  margin: auto;
  overflow: hidden;
}

/* 图片 */
.images_box {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  background-color: white;
}

.img-box {
  border: 2rpx;
  border-style: solid;
  border-color: rgba(170, 167, 167, 0.452);
  width: 200rpx;
  height: 200rpx;
  margin-left: 35rpx;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
  position: relative;
}

/* 删除图片 */
.img-delect {
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
  position: absolute;
  right: -20rpx;
  top: -20rpx;
}

.img {
  width: 100%;
  height: 100%;
}

js:
Page({

  /**
   * 页面的初始数据
   */
  data: {
    tempFilePaths: '',
    imgbox: [], //选择图片
    fileIDs: [], //上传云存储后的返回值
    src: 0,
  },

  onLoad: function (options) {


  },
    //图片点击事件
    imgYu: function (event) {
      var that = this;
  
      console.log(event.target.dataset.message + "这是啥");
      var src = event.target.dataset.message;
      //图片预览
      wx.previewImage({
        current: src, // 当前显示图片的http链接
        urls: [src] // 需要预览的图片http链接列表
      })
    }, // 删除照片 &&
    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
      });
    },
    // 删除照片 &&
    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 that = this;
      var n = 2;
      if (2 > imgbox.length > 0) {
        n = 2 - imgbox.length;
      } else if (imgbox.length == 2) {
        n = 1;
      }
      wx.chooseImage({
        count: n, // 默认9，设置图片张数
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: function (res) {
          // console.log(res.tempFilePaths)
          // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
          var tempFilePaths = res.tempFilePaths
          console.log('路径' + tempFilePaths);
          if (imgbox.length == 0) {
            imgbox = tempFilePaths
          } else if (2 > imgbox.length) {
            imgbox = imgbox.concat(tempFilePaths);
          }
          that.setData({
            imgbox: imgbox,
            imgnum: imgbox.length
          });
        }
      })
    },
  
    //图片
    imgbox: function (e) {
      this.setData({
        imgbox: e.detail.value
      })
    },
  
})