微信小程序 云开发 上传多张图片 9 宫格

直接看录屏（有语音说明）

如果播放失败请 点击此处跳转腾讯视频

show me the code

<view class="img-view">
  <view class="show" wx:for="{{ imgOne }}" wx:key="_id">
    <image
      src="{{ item }}"
      mode="aspectFill"
      data-index="{{index}}"
      bindtap="previewImg"
    ></image>
    <image
      class="del-img"
      src="../../images/icons/close.png"
      data-index="{{index}}"
      bindtap="reBackImg"
    ></image>
  </view>
  <view class="up" wx:if="{{imgOneSwitch}}" bindtap="onChooseOne">+</view>
</view>

<button class="onSavebut" bindtap="onSave">发布</button>

/* 上传图片 */
.img-view {
  width: 710rpx;
  margin: 20rpx 20rpx;
  /* background-color: red; */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.img-view .up,
.img-view .show {
  margin: 6rpx;
}

.img-view .up {
  height: 220rpx;
  width: 220rpx;
  background-color: #ededed;
  line-height: 200rpx;
  text-align: center;
  font-size: 100rpx;
  color: #bfbfbf;
}

.img-view .show {
  width: 220rpx;
  height: 220rpx;
  /* background-color: red; */
  position: relative;
}

.del-img {
  position: absolute;
  top: 0rpx;
  right: 0rpx;

  box-sizing: border-box;
  padding: 8rpx;

  background-color: #fff;
  border-bottom-left-radius: 10rpx;

  height: 50rpx !important;
  width: 50rpx !important;
  z-index: 9998;
}

.img-view .show image {
  width: 100%;
  height: 100%;
}

.onSavebut {
  width: 300rpx;
  color: #fff;
  background-color: #07c160;
}

Page({
  data: {
    imgOneSwitch: true,
    imgOne: [],
    MAXCOUNTIMAGE: 9,
  },

  onLoad: function (options) {},

  // 保存到 存储 & 数据库
  onSave: function () {
    if (this.data.imgOne.length == 0) {
      wx.showToast({
        title: "请添加图片",
        icon: "none",
      });
      return;
    }

    console.log("通过 ---空--- 校验");

    wx.showToast({
      title: "上传图片中",
      icon: "loading",
      duration: 30000,
      mask: true,
    });

    this.OnUpImg();
  },

  OnUpImg: function () {
    let promiseArr = [];
    let fileIds = []; // 将图片的fileId存放到一个数组中
    let imgLength = this.data.imgOne.length;

    // 图片上传
    for (let i = 0; i < imgLength; i++) {
      let p = new Promise((resolve, reject) => {
        let item = this.data.imgOne[i];
        let suffix = /\.\w+$/.exec(item)[0];

        wx.cloud.uploadFile({
          cloudPath:
            "testdir/" + Date.now() + "-" + Math.random() * 1000000 + suffix,
          filePath: item,
          success: (res) => {
            console.log(res);
            // console.log(res.fileID)
            fileIds = fileIds.concat(res.fileID); // 拼接
            resolve();
          },
          fail: (err) => {
            console.error(err);
            reject();
          },
        });
      });
      promiseArr.push(p);
    }

    Promise.all(promiseArr)
      .then((res) => {
        this.addtoDB(fileIds);
      })
      .catch((err) => {
        console.error(err); // 上传图片失败

        wx.showToast({
          title: "上传失败 请再次点击发布",
          icon: "none",
          duration: 3000,
        });
      });
  },

  addtoDB: function (fileIds) {
    wx.showToast({
      title: "发布中...",
    });
  },

  // 选择图片 + 回显
  onChooseOne: function () {
    let that = this;
    wx.chooseImage({
      count: this.data.MAXCOUNTIMAGE - this.data.imgOne.length,
      // sizeType: ['compressed','original'],
      sourceType: ["album", "camera"],
      sizeType: ["compressed"],
      // sourceType: ['album'],
      success(res) {
        console.log(res);

        let tempArr = that.data.imgOne.concat(res.tempFilePaths);

        that.setData({
          imgOne: tempArr,
        });

        if (that.data.imgOne.length >= that.data.MAXCOUNTIMAGE) {
          that.setData({
            imgOneSwitch: false,
          });
        }
      },
    });
  },

  // 删除图片功能
  reBackImg: function (e) {
    let dataset = e.currentTarget.dataset;
    let index = dataset.index;
    console.log(index);

    let arr = this.data.imgOne;
    arr.splice(index, 1);

    if (
      arr.length < this.data.MAXCOUNTIMAGE &&
      this.data.imgOneSwitch === false
    ) {
      this.setData({
        imgOneSwitch: true,
      });
    }

    this.setData({
      imgOne: arr,
    });
  },

  // 预览图片
  previewImg: function (e) {
    console.log("放大图片");

    let index = e.currentTarget.dataset.index;
    let item = this.data.imgOne[index];

    console.log(item);

    wx.previewImage({
      current: item, // 当前显示图片的http链接
      urls: this.data.imgOne, // 需要预览的图片http链接列表
    });
  },
});

注意要在 云开发控制台 -> 云存储 新建 testdir 文件夹