微信小程序---手机照片上传和删除

蔚落 2022-03-09 06:40 453阅读 0赞

wxml：

wxss：

.gallery {
      background: #fff;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      padding-bottom: 80px;
    }
    /*每张图片所占容器*/
    .item {
      position: relative;
      margin: 10rpx 2%;
      width: 46%;
      height: 442rpx;
      background: #f3f3f3;
    }
    .item image {
      width: 100%;
      height: 100%;
    }
    /*add按钮*/
    .item2 {
      margin: 10rpx 2%;
      width: 45%;
      height: 442rpx;
      text-align: center;
      line-height: 442rpx;
      font-size: 200rpx;
      background: #fff;
      color: #e4e5ea;
      border: 1px dashed #e4e5ea;
    }
    /*删除按钮*/
    .delete {
      width: 100%;
      position: absolute;
      left: 0;
      bottom: 0;
      height: 80rpx;
      font-size: 22rpx;
      text-align: center;
      background-color: rgba(0, 0, 0, 0.3);
      display: none;
    }
    .delete image {
      width: 44rpx;
      margin-top: 22rpx;
    }

重点来了，js:

Page({
      data: {
        images: [],
        pathsTmp: []
      },  
    // 本地选择照片上传
      chooseImage: function() {
        var that = this
        wx.chooseImage({
          count: 9,
          sizeType: ['compressed'],
          sourceType: ['album', 'camera'],
          success: function(res) {
            that.setData({
              //上传完并显示照片
              images: that.data.images.concat(res.tempFilePaths)
            });
          }
        })
      },
      // 删除照片
      delete: function(e) {
        var that = this;
        var index = e.currentTarget.dataset.index;
        var images = that.data.images;
        images.splice(index, 1);
        that.setData({
          images: images
        });
      },
    })