微信小程序图片上传和预览以及取消上传图片案例

前言：

做小程序项目遇到一个需求，就是上传图片和预览，以及取消指定的图片，其实这个功能挺好搞的，借助微信官方的API结合实现，只不过注意一点细节。不多说了直接上代码和效果图。大家可以直接复制我的代码进行实现功能。

---

效果图：

---

代码：

wxml代码：

<view class="container">
  <view class="uploadContainer">
  <!-- 图片预览区域 -->
    <view class="imgContainer">
      <view class='imageInfo' wx:for="{{imgs}}" wx:for-item="item"  wx:key="*this">
          <image src="{{item}}"data-index="{{index}}"mode="aspectFill" bindtap="previewImg">
                    <icon type='cancel' class="delete-btn" data-index="{{index}}" catchtap="deleteImg"></icon>
          </image>
      </view>
    </view>
    <!-- 备注 -->
    <view class="page-section">
    <view class="weui-cells__title note">提示:图片最多上传8张,点击X可以取消上传图片</view>
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell weui-cell_input noteContent">
         <textarea disabled="{{inputDisable}}" bindinput="checkInput" placeholder="作品备注" maxlength="101" placeholder-style="color:grey;"/>
      </view>
    </view>
  </view>
    <button class="upload-img-btn" bindtap="chooseImg" type='primary'>拍照  / 上传</button>
    <button class="upload-img-btn" bindtap="sureUpload" type='warn'>上传</button>
  </view>
</view>

wxss代码:

.container {
  padding: 0;
  align-items: left;
  padding-left: 8rpx;
}
.uploadContainer{
  padding: 10rpx;
  width: 100%;
  height: 620rpx;
}
.imgContainer{
  width: 100%;
  height: 370rpx;
  padding: 2rpx;
}
.page-section{
  width:100%;
  height: 250rpx;
}
.page-section .note{
  height: 30rpx;
  font-size: 30rpx;
  font-weight: bold;
  color: red;
  margin-bottom: 10rpx;
}
.noteContent{
  width: 98%;
  border:2rpx solid #ccc;
  height: 200rpx;
  padding: 0 5rpx;
  border-radius: 5rpx;
  box-shadow: 2rpx;
  margin-top: 5rpx;
}
.noteContent textarea{
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.imageInfo {
float:left;
position:relative;
border: 1rpx solid #ccc;
border-radius: 2rpx;
width: 23%;
height: 175rpx;
margin: 2rpx 6rpx;
}
.imageInfo image{
  width: 100%;
  height: 100%;
}
.delete-btn{
  position: absolute;
  top: 0;
  right: 0;
}
button {
  width: 100%;
  margin-top: 10rpx;
}

js代码：

// pages/uploadMessage/uploadMessage.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    imgs: [],
    inputDisable:false
  },
  //选择图片
  chooseImg: function (e) {
    var that = this;
    var imgs = this.data.imgs;
    if (imgs.length >= 8) {
      this.setData({
        lenMore: 1
      });
      setTimeout(function () {
        that.setData({
          lenMore: 0
        });
      }, 2500);
      return false;
    }
    wx.chooseImage({
      count: 8, // 默认9
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths;
        var imgs = that.data.imgs;
        // console.log(tempFilePaths + '----');
        for (var i = 0; i < tempFilePaths.length; i++) {
          if (imgs.length >= 8) {
            that.setData({
              imgs: imgs
            });
            return false;
          } else {
            imgs.push(tempFilePaths[i]);
          }
        }
        // console.log(imgs);
        that.setData({
          imgs: imgs
        });
      }
    });
  },
  // 删除图片
  deleteImg: function (e) {
    var imgs = this.data.imgs;
    var index = e.currentTarget.dataset.index;
    imgs.splice(index, 1);
    this.setData({
      imgs: imgs
    });
  },
  // 预览图片
  previewImg: function (e) {
    //获取当前图片的下标
    var index = e.currentTarget.dataset.index;
    //所有图片
    var imgs = this.data.imgs;
    wx.previewImage({
      //当前显示图片
      current: imgs[index],
      //所有图片
      urls: imgs
    })
  },
  //检查字数
  checkInput:function(e){
    var that=this;
    if(e.detail.value.length>=100){
      wx.showToast({
        title: '备注不能超过100个字',
        icon:"none",
        duration:2000
      })
    }
  },
  //上传到后台
  sureUpload:function(e){
    var imgList=this.data.imgs;
    if(imgList.length>8){
      wx.showToast({
        title: '上传的图片不能超过8张',
        icon: 'none',
        duration: 2000
      })
      return false;
    }
    wx.showModal({
      title: '上传作品',
      content: '确定上传？',
      success(res) {
        if (res.confirm) {
            wx.showLoading({
              title: '正在上传',
              mask:true
            })
          setTimeout(function () {
            wx.hideLoading()
            wx.showToast({
              title: '上传成功',
              icon:"success",
              duration:2000
            })
          }, 4000)
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })
  },



  bindPickerChange(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      index: e.detail.value
    })
  },
  clearFont() {
    this.setData({
      placeholder: ''
    })
  },

  bindRegionChange(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      region: e.detail.value
    })
  }
})

结尾：

分享：努力不需要仪式感！！