微信小程序实现常用添加图片功能, 预览, 删除(完整版)超详细

Bertha 。 2023-07-25 14:17 5阅读 0赞

我们先来看看效果图吧

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70][]

我们来看看代码是怎么实现的

wxml

wxss

.img-li {
      width: 23%;
      height: 170rpx;
      margin-right: 20rpx;
      margin-bottom: 20rpx;
    }
    .img-li:nth-child(4) {
      margin-right: 0;
    }
    .img-li:first-child {
      margin-right: none;
    }
    .img-li image {
      width: 100%;
      height: 100%;
    }

js  最主要部分

Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        imgList: []
      },
      // 点击添加选择
      chooseSource: function() {
        var _this = this;
        wx.showActionSheet({
          itemList: ["拍照", "从相册中选择"],
          itemColor: "#CED63A",
          success: function(res) {
            if(!res.cancel) {
              if(res.tapIndex == 0) {
                _this.imgWShow("camera")        //拍照
              } else if (res.tapIndex == 1) {
                _this.imgWShow("album")      //相册
              }
            }
          }
        })
      },
      // 点击调用手机相册/拍照
      imgWShow: function(type) {
        var _this = this;
        let len = 0;
        if(_this.data.imgList != null) {
          len = _this.data.imgList.length
        }   //获取当前已有的图片
        wx.chooseImage({
          count: 6-len,     //最多还能上传的图片数,这里最多可以上传5张
          sizeType: ['original', 'compressed'],        //可以指定是原图还是压缩图,默认二者都有
          sourceType: [type],             //可以指定来源是相册还是相机, 默认二者都有
          success: function(res) {
            wx.showToast({
              title: '正在上传...',
              icon: "loading",
              mask: true,
              duration: 1000
            })
            // 返回选定照片的本地文件路径列表,tempFilePaths可以作为img标签的scr属性显示图片
            var imgList = res.tempFilePaths
            let tempFilePathsImg = _this.data.imgList
            // 获取当前已上传的图片的数组
            var tempFilePathsImgs = tempFilePathsImg.concat(imgList)
            _this.setData({
              imgList: tempFilePathsImgs
            })
          },
          fail: function () {
            wx.showToast({
              title: '图片上传失败',
              icon: 'none'
            })
            return;
          }
        })
      },
      // 预览图片
      previewImg: function(e) {
        let index = e.target.dataset.index;
        let _this = this;
        wx.previewImage({
          current: _this.data.imgList[index],
          urls: _this.data.imgList
        })
      },
      // 点击删除
      deleteImg: function(e) {
        var _this = this;
        var imgList = _this.data.imgList;
        var index = e.currentTarget.dataset.index;      //获取当前点击图片下标
        wx.showModal({
          title: '提示',
          content: '确认要删除该图片吗?',
          success: function(res) {
            if(res.confirm) {
              console.log("点击确定了")
              imgList.splice(index, 1);
            } else if (res.cancel) {
              console.log("点击取消了");
              return false
            }
            _this.setData({
              imgList
            })
          }
        })
      },
    })

这里我写了一个限制最多上传6张图片,可以看一下官方文档

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70]: /images/20230528/8c0d9174ca1743a7b721de6c1abf2f97.png