微信小程序 上传、预览、删除图片

页面view代码

<view class="allImgBox">
  <view class="img_num">{{imgs.length}}/3</view>
  <view class="imgBox" wx:for="{{imgs}}" wx:for-item="item" wx:key="*this">    
    <image src="{{item}}" data-index="{{index}}" mode="aspectFill" bindtap="previewImg" bindlongtap='previewLongImg'></image>
    <view class="delete-btn" data-index="{{index}}" catchtap="deleteImg">
      <text class='fa fa-trash'>删除图片</text>
    </view>
  </view>
  <view class="upLoadImgBox" bindtap="upLoadEvaImg" wx:if="{{imgs.length<3}}">
    <!-- <text class='fa fa-camera'></text> -->
    <image src="/images/add.png" style="width:100%;height:100%;"></image>
  </view>
</view>

上传图片、删除图片CSS

.allImgBox{
  display: flex;
  flex-wrap: wrap;
}
.upLoadImgBox,.imgBox{
  width: 140rpx;
  height: 140rpx;
  border-radius: 8rpx;
  /* border: solid 1px #E5E5E5; */
  margin: 15rpx;
  position: relative;
}
.upLoadImgBox{
  /* background-color: #E5E5E5; */
  display: flex;
  align-items: center;
  justify-content: center;
}
.upLoadImgBox text{
  font-size: 60rpx;
  color: #999;
}
.imgBox image{
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
}
.color999{
  color: #999;
}
.f14{
  font-size: 28rpx;
}
.bT{
  border-top: solid 1px #E5E5E5;
} 
.pT20{
  padding-top: 20rpx;
}
.delete-btn{
  position: absolute;
  left: 0;
  bottom: 0px;
  font-size:24rpx;
  color: #ccc;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
}

js代码

Page({

  /**
   * 页面的初始数据
   */
  data: {
    imgs: [],//本地的图片数组
    imgUrlArr: [],//需要传给后台的图片数组
    countNum :3 //上传数量
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },
  

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
   
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

 
  // 上传图片
  upLoadEvaImg: function (e) {
    var that = this;
    var imgs = this.data.imgs;
    if (imgs.length >= 3) {
      this.setData({
        lenMore: 1
      });
      setTimeout(function () {
        that.setData({
          lenMore: 0
        });
      }, 2500);
      wx.showToast({
        icon:'none',
        title: '最多只能选择3张图片',
      })
      return false;
    }
    wx.chooseImage({
      count: that.data.countNum, // 默认9
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths;
        var imgs = that.data.imgs;
        var imgUrlArr = that.data.imgUrlArr;
        // console.log(tempFilePaths + '----');
        for (var i = 0; i < tempFilePaths.length; i++) {
          if (imgs.length >= 9) {
            that.setData({
              imgs: imgs,
              imgUrlArr: imgUrlArr
            });
            return false;
          } else {
            imgs.push(tempFilePaths[i]);
            var item = tempFilePaths[i];
            wx.uploadFile({
              // url: ‘接口域名’ + url,
              filePath: item,
              name: 'file',
              success: function (res) {
                let picPath = JSON.parse(res.data);
                picPath = picPath.data;
                imgUrlArr.push(picPath);
                that.setData({
                  imgUrlArr: imgUrlArr
                })
              },
              fail: function (res) {
                wx.showToast({
                  icon: 'none',
                  title: '上传失败，请稍后重试!',
                })
              }
            })
          }
        }
        // console.log(imgs);
        that.setData({
          imgs: imgs,
          imgUrlArr: imgUrlArr,
          countNum: 3 - imgs.length
        });
      }
    });
  },
  // 删除图片
  deleteImg: function (e) {
    var imgs = this.data.imgs;
    var imgUrlArr = this.data.imgUrlArr;
    var index = e.currentTarget.dataset.index;
    imgs.splice(index, 1);
    imgUrlArr.splice(index, 1)
    var imgsLen = imgs.length;
    this.setData({
      imgs: imgs,
      imgUrlArr: imgUrlArr,
      countNum: 3 - imgsLen
    });
  },
  // 预览图片
  previewImg: function (e) {
    //获取当前图片的下标
    var index = e.currentTarget.dataset.index;
    //所有图片
    var imgs = this.data.imgs;
    wx.previewImage({
      //当前显示图片
      current: imgs[index],
      //所有图片
      urls: imgs
    })
  }
})