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

Posted 2020-11-14 爱尚丽明

<view class="allImgBox">
       <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">
              <text class=‘fa fa-camera‘></text>
         </view>
</view>

页面view代码

.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%;}

上传图片、删除图片CSS

 

let app = getApp();
let wxCommon = require(‘../../../utils/common.js‘);
const url = ‘上传到七牛接口‘;
Page({

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

  /**
   * 生命周期函数--监听页面加载
   */
  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 >= 4) {
      this.setData({
        lenMore: 1
      });
      setTimeout(function () {
        that.setData({
          lenMore: 0
        });
      }, 2500);
      wx.showToast({
        icon:‘none‘,
        title: ‘最多只能选择4张图片‘,
      })
      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: 4 - 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: 4 - imgsLen
    });
  },
  // 预览图片
  previewImg: function (e) {
    //获取当前图片的下标
    var index = e.currentTarget.dataset.index;
    //所有图片
    var imgs = this.data.imgs;
    wx.previewImage({
      //当前显示图片
      current: imgs[index],
      //所有图片
      urls: imgs
    })
  }
})

js代码

 

 

看一下实现方法和步骤就好，直接粘贴js是实现不了的！！！