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

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

	①.wxml
	 
      
        
        
      
      
      添加图片
    

  ②.js
  data: {
   	src:[],
   	},
   // 点击添加图片
  clickImg() {
    const _this = this;
    wx.chooseImage({
      count: 9,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success(res) {
        // 添加图片
        var imgList = _this.data.src.concat(res.tempFiles[0].path);
        if(_this.data.src.length>8){
          console.log(1)
        }else{
          _this.setData({
            src: imgList
          }, () => {
            // 回调成功
          })
        } 
      }
    })
  },
  // 点击图片预览
  previewImage: function (e) {
    var _this = this;
    var current = e.currentTarget.dataset.url
    wx.previewImage({
      current: current, // 当前显示图片的http链接
      urls: _this.data.src // 需要预览的图片http链接列表
    })
  },  
  // 点击删除图片
  clearimg(e) {
    var _this = this;
    var images = _this.data.src;
    var index = e.currentTarget.dataset.index
    images.splice(index, 1);
    _this.setData({
      src: images
    }, () => {
      // 回调成功
      console.log(_this.data.src)
    })
  },

博主也是刚接触微信小程序不久 ，希望和小伙伴共同学习 共同努力。
如有不全 请留言博主肯定第一时间来进行更新和改写