微信小程序实现多张图片的一次性上传，删除，预览，点击按钮上传至云存储

实现功能

1. 实现从本地文件中一次选择上传多张图片
2. 长按可删除图片
3. 单击可预览图片
4. 点击按钮上传至小程序云平台的云存储中(自行借鉴)

应用场景

租售、分享、交友等平台中图片的选择与上传

代码实例

1. 效果图
   
2. .wxml文件

<text class="word-class">上传图片实例：</text>
<!--以下为图片选择-->
<view class="img_box">
  <view class="imgs" wx:for="{{tempFilePaths}}" wx:key="index">
    <image src='{{item}}' bindlongpress="DeleteImg" bindtap="PreviewImg" data-index="{{index}}" mode='widthFix' />
  </view>
  <view class="imgs">
    <view class="images" bindtap="ChooseImg">
      <!--这里自行创建image文件夹，并添加choose.png，及中部加号-->
      <image src='./image/choose.png' mode='widthFix' />
    </view>
  </view>
</view>
<!--以下为上传按钮，可自行借鉴-->
<view class="UploadBtnarea">
  <button class="UploadBtnclass" bindtap="UploadBtntap">上传图片</button>
</view>

3. .wxss文件

/* 提示 */
.word-class{
  font-size: 14px;
  color: rgb(95, 87, 87);
  margin-left: 10px;
}
/* 选择图片 */
.img_box{
  width:690rpx;
  position:relative;
  display: flex;
  flex-wrap: wrap;
  margin:0 auto;
  padding-top: 20px;
}
.imgs{
  width:33.33333333%;
  display: flex;
  justify-content: center;
  margin-bottom:20rpx;
}
.imgs image{
  width:90%;
  max-height:212rpx;
  border:1px solid rgba(214, 212, 212, 0.1);
}
.imgs .images{
  position:relative;
}
.images button{
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
}
.img_box .images{
  width:90%;
	height: 212rpx;
  border:1px solid #E8E8E8;
  border-radius:4rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.img_box .images>image{
  width:60rpx;
	height:60rpx;
}
/* 上传按钮 */
.UploadBtnarea{
  width: 100%;
  height: 32px;
  margin-top: 30px;
  margin-bottom: 10px;
}
.UploadBtnclass{
  height: 100%;
  width: 90%;
  background-color: rgb(5, 173, 5);
  color: white;
  align-self: center; 
  font-size: 13px;
}

4. .js文件

Page({

  data: {
    tempFilePaths: [],
    //以下为上传图片至云存储
    //images_fileID: [],
  },
  //选择图片
  ChooseImg: function () {
    let that = this;
    wx.chooseImage({
      count: 9, // 默认最多9张图片，可自行更改
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: res => {
        wx.showToast({
          title: '正在上传...',
          icon: 'loading',
          mask: true,
          duration: 1000
        })
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        let tempFilePath = res.tempFilePaths;
        that.setData({
          tempFilePaths: tempFilePath
        })
      }
    })
  },
  //预览图片
  PreviewImg: function (e) {
    let index = e.target.dataset.index;
    let that = this;
    //console.log(that.data.tempFilePaths[index]);
    //console.log(that.data.tempFilePaths);
    wx.previewImage({
      current: that.data.tempFilePaths[index],
      urls: that.data.tempFilePaths,
    })
  },
  //长按删除图片
  DeleteImg: function (e) {
    var that = this;
    var tempFilePaths = that.data.tempFilePaths;
    var index = e.currentTarget.dataset.index;//获取当前长按图片下标
    wx.showModal({
      title: '提示',
      content: '确定要删除此图片吗？',
      success: function (res) {
        if (res.confirm) {
          //console.log('点击确定了');
          tempFilePaths.splice(index, 1);
        } else if (res.cancel) {
          //console.log('点击取消了');
          return false;
        }
        that.setData({
          tempFilePaths
        });
      }
    })
  },
  // 上传图片至云数据库,可自行参考
  /*
  UploadBtntap: function (e) {
    var count = 0;
    var h = this.data.tempFilePaths.length;
    if (h != 0) {
      this.setData({
        images_fileID: []
      })
    }
    for (var i = 0; i < h; i++) {
      //上传文件
      var imageUrl = this.data.tempFilePaths[i].split("/");
      var name = imageUrl[imageUrl.length - 1];
      var images_fileID = this.data.images_fileID;
      wx.cloud.uploadFile({
        cloudPath: name,     //自定义云存储路径
        filePath: this.data.tempFilePaths[i],
        success: res => {
          images_fileID.push(res.fileID);
          this.setData({
            images_fileID: images_fileID         //更新data中的 fileID
          })
          fail: res => {
            count++;
            wx.hideToast();
            wx.showModal({
              title: '错误提示',
              content: '上传图片失败',
              showCancel: false,
              success: function (res) { }
            })
          }
        }
      });
    }
  }
  */
})

以上便是上传图片实例的所有内容啦，原创不易，如需转载请注明原文作者及出处,谢谢!