图片上传(限制张数)

图片上传以及长按删除图片的实现

微信小程序有一个专门上传图片的Api——uploader，但是此组件只适用于单张图片的上传。在实际操作过程中，会涉及到多图上传以及图片相关的其他的功能的实现。因此，这里主要提供一下关于微信图片上传以及长按图片进行删除的操作。(如果大家有更好的方式，可以留个言~~~）

1. html部分代码如下：

<view class="layout_pho">
    <view class="conn">
      <view class="pho_text">
        <view class="top_left">
          <view class="uploader__title">图片上传</view>
          <view class="uploader__tips" >(长按删除)</view>
        </view>
        <view class="top_right">{{files.length}}/9</view>
      </view>
      <view class="picture_layout">
        <view class="list_img">
          <block wx:for="{{files}}" wx:key="{{index}}">
            <view class="box_images" data-index="{{index}}" bindtap="previewImage" bindlongpress='deleteImage'>
              <image class="item_images" src="{{item}}" mode="aspectFill"/>
            </view>
          </block>
        </view>
        <view class='add_picture' bindtap='chooseImage' wx:if="{{showUpload}}">
          <image src="../../images/box_image.png" style="width:198rpx;height:198rpx;margin-right:16rpx;margin-bottom:16rpx"></image>
        </view>
      </view>
    </view>
  </view>

2. css部分代码如下：

.layout_pho{
  display: flex;
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -ms-box-sizing:border-box;
  -o-box-sizing:border-box;
  width: 100%;
  padding: 0 46rpx 0 62rpx;
  flex-direction: column;
  margin-bottom: 64rpx;
}
/* padding-right:46rpx;为了使图片在一行显示3张 */
/* margin-bottom: 64rpx;图片与底部按钮之间的留白 */
.pho_text{
  display: flex;
  justify-content: space-between;
  margin: 68rpx 0;
  padding-right: 16rpx;
}
/* padding-right: 16rpx;为了使得标题部分左右两侧留白相等 */
.top_right{
  font-size: 32rpx;
  color: #999999;
  line-height: 32rpx;
}
.top_left{
  display: flex;
}
.uploader__title{
  font-size: 32rpx;
  line-height: 32rpx;
  color: #000000;
}
.uploader__tips{
  font-size: 32rpx;
  color: #3a3a3a;
  line-height: 32rpx;
  padding-left: 24rpx;
}
.picture_layout{
  overflow: hidden;
}
.add_picture{
  float: left;
  position: relative;
  width: 198rpx;
  height: 198rpx;
  margin-right: 16rpx;
  margin-bottom: 16rpx;
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -ms-box-sizing:border-box;
  -o-box-sizing:border-box;
}
.add_picture:after,add_picture:before{
  content:"";
  position: absolute;
  top: 50%;
  left:50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  background-color: #a3a3a3;
}
.box_images{
  float: left;
  margin-right: 16rpx;
  margin-bottom: 16rpx;
}
.item_images{
  display: block;
  width: 198rpx;
  height: 198rpx;
  overflow: hidden;
}

3. js代码部分如下：

const app = getApp();
Page({
  data: {
    files: [],//已选择的图片临时路径数组
    uploaderNum: 0,//初始上传图片的数量为0
    showUpload: true,
    history: false,
    containerID: "",
  },
  gobackpage: function () {
    wx.navigateBack({
      delta: 1
    })
  },
  //上传图片
  chooseImage: function (e) {
    var that = this;
    wx.chooseImage({
      count: 9 - that.data.uploaderNum, // 默认9
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        console.log(res)
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths;
        let files = that.data.files.concat(tempFilePaths);
        //启动上传等待中...  
        wx.showLoading({
          title: '上传中...',
          mask: true,
          duration: 1000
        })
        if (files.length == 9) {
          that.setData({
            showUpload: false
          })
        }
        that.setData({
          files: files,
          uploaderNum: files.length,
        })
      }
    })
  },
  //长按删除当前图片
  deleteImage: function (e) {
    var that = this;
    var files = that.data.files;
    var index = e.currentTarget.dataset.index; //获取当前长按图片下标
    wx.showModal({
      title: '提示',
      content: '确定要删除此图片吗？',
      success: function (res) {
        if (res.confirm) {
          console.log('点击确定了');
          files.splice(index, 1);
        } else if (res.cancel) {
          console.log('点击取消了');
          return false;
        }
        that.setData({
          files
        });
      }
    })
  },