功能③ 小程序图片上传+预览+删除

上传组件upLoadImgComponent.wxml

<!--上传图片组件-->
<view class='upload_warp_img'>
  <view class='img-preview-con' wx:for='{{imgList}}' wx:key="*this">
    <image src='{{item}}' class='img-preview-url' mode='widthFix' data-id='{{index}}' catchtap="previewImage"></image>
    <image src="/images/delImg.png" class='img-preview-del' data-id='{{index}}' catchtap="delImage"></image>
  </view>
  <view class='add-content' wx:if='{{imgList.length<maxNum}}'>
    <view class='add-img' catchtap="chooseImage">
      <image src="/images/addImg.png"></image>
      <text>{{addText}}</text>
    </view>
  </view>
</view>
<!-- 预览-->
<view class='img-preview' wx:if='{{previewImg}}' catchtap='closePreview'>
  <image src='{{previewImg}}' mode='widthFix'></image>
</view>

上传组件upLoadImgComponent.js

// pages/uploadComponent/uploadComponent.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    addText:{
      type:String,
      value:'上传图片' 
    },//提示文字
    maxNum:{
      type:Number,
      value:1,
    },//最大可以选取图片数量
    imgList:{
      type:Array,
      value:[],//图片列表
    }

  },
  

  /**
   * 组件的初始数据
   */
  data: {
    imgList:[],
    previewImg: '',//预览的放大图
    cvsList:[],
  },

  /**
   * 组件的方法列表
   */
  methods: {
    /**
  * 从本地相册选择图片或使用相机拍照
  */
    chooseImage: function (e) {
      let that = this;
      //当前剩余的可上传图片数量
      let imgNum = that.properties.maxNum - that.data.imgList.length;
      //从本地相册选择图片或使用相机拍照
      wx.chooseImage({
        count: imgNum,
        sizeType: 'compressed',
        sourceType: ['album', 'camera'],
        success(res) {
          // tempFilePaths可以作为img标签的src属性显示图片
          let imgUrl = res.tempFilePaths;
          let imgList = that.data.imgList;
          for (var i = 0; i < imgUrl.length; i++) {
            imgList.push(imgUrl[i]);
          }
          that.setData({
            imgList: imgList
          })
          that.triggerEvent("getImgList", imgList)
        }
      })
    },

    //删除图片
    delImage: function (e) {
      let that = this
      let index = e.currentTarget.dataset.id;
      wx.showModal({
        title: '提示',
        content: '确定要删除该图片吗？',
        showCancel: true,
        success: function (res) {
          if (res.confirm) {
            console.log(index);
            let imgList = that.data.imgList;
            imgList.splice(index, 1);
            that.setData({
              imgList: imgList,
            });
            that.triggerEvent("delImg", that.data.imgList)
          }
        }
      })
    },
    // 预览放大的图片
    previewImage: function (e) {
      let that = this
      let index = e.currentTarget.dataset.id;
      that.setData({
        showTxtarea: false,
        previewImg: that.data.imgList[index],
      });
    },
    //关闭预览
    closePreview: function () {
      this.setData({
        showTxtarea: true,
        previewImg: '',
      });
    },
  }
})

上传组件upLoadImgComponent.wxss

/* 上传图片 */
.upload_warp_img {
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: 30rpx;
}

.upload_warp_img view {
  margin-bottom: 30rpx;
}

.img-preview-con {
  margin: 10rpx;
  width: 40vw;
  height: 210rpx;
  position: relative;
  overflow: hidden;
}

.img-preview-con .img-preview-url {
  width: 100%;
}

.img-preview-del {
  position: absolute;
  right: 0;
  top: 0;
  width: 50rpx;
  height: 50rpx;
  z-index: 90;
}

.add-content {
  width: 40vw;
  height: 210rpx;
}

.add-content image {
  width: 100%;
  height: 100%;
}

.add-content .add-img {
  width: 100%;
  background: #efefef;
  height: 100%;
  padding: 20rpx;
  box-sizing: border-box;
  text-align: center;
  border-radius: 16rpx;
  margin: 10rpx;
}
.add-content .add-img text{
  display: block;
  font-size: 30rpx;
  color: #C9C9C9;
}

.add-content .add-img image {
  width: 34%;
  height: 34%;
  margin-top: 10%;
}

.img-preview-cvs-con{
  display: flex;
  position: absolute;
  bottom: 0;
  left: 100%;
}
.img-preview-cvs {
  margin-right: 40rpx;
  width: 190rpx;
  height: 190rpx;
}

.img-preview-cvs canvas {
  width: 100%;
  height: 100%;
}
/* 预览图片 */
.img-preview{
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background: #000;
  z-index: 100;
  padding: 5%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
.img-preview image{
  width: 100%;
  display: block;
  margin-top: -25%;
}
.result-con{
  display: flex;
  flex-direction: column;
}