微信小程序上传多张图片

微信小程序可以上传单张，多张，数量不超过一定数量

以4张为例子

wxml

   <view class="add-img-box">
      <view class="add-img">
        <view bindtap="addImg" class="addimg-btn">+</view>
        <view class="img-box">
          <view class="img-con" wx:for="{{addImgUrl}}" wx:key="index">
            <image class="imgArr" bindtap="previewImg" bindlongpress="deleteImage" data-url="{{item}}" src="{{item}}" role="img" />
            <view class="imgDel">
              <text class="iconfont icon-shanchu" bindtap="imgSingleDel" data-index="{{index}}"></text>
            </view>
          </view>
        </view>
      </view>
      <view class="limit-tip">最多上传4张</view>
    </view>

wxss

.add-img-box {
  width: 750rpx;
  padding-top: 1rpx;
  background: #FFFFFF;
  margin-top: 20rpx;
  /* border: 1px solid hotpink; */
  padding: 0 30rpx;
}

.add-img {
  width: 650rpx;
  height: 160rpx;
  padding-bottom: 1rpx;
  background: #FAFAFA;
  /* margin: 0 30rpx 0 !important; */
  display: flex;
  align-items: flex-start;
  /* border: 1px solid yellow; */
}

.add-img .addimg-btn {
  font-size: 50rpx;
  width: 110rpx;
  height: 140rpx;
  vertical-align: middle;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10rpx 0 0rpx 15rpx;
  background-color: #fff;
  box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(231, 231, 231, 0.5);
  border-radius: 6rpx;
  /* border: 1px solid wheat; */
}

.add-img .img-box {
  width: 550rpx;
  padding-top: 20rpx;
  overflow-x: scroll;
  height: 150rpx;
  border-radius: 6rpx;
  display: flex;
  align-items: flex-start;
}

.img-box .imgArr {
  position: relative;
  width: 110rpx;
  height: 120rpx;
  margin-left: 25rpx;
  box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(231, 231, 231, 0.5);
}

.add-img>image {
  width: 110rpx;
  height: 120rpx;
  margin-left: 25rpx;
  box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(231, 231, 231, 0.5);
}

.imgArr image {
  width: 100%;
  height: 100%;
}

/* 删除 */
.imgDel {
  position: absolute;
  right: -18rpx;
  top: -20rpx;
  width: 40rpx;
  height: 40rpx;
}

.imgDel .iconfont {
  font-size: 40rpx;
  color: #E02020;
}

.img-con {
  position: relative;
  /* width: 526rpx; */
  height: 110rpx;
  border-radius: 6rpx;
  display: flex;
  align-items: flex-start;
}

js

  /*页面的初始数据*/
  data: {
    imageUrl: app.globalData.URL,
    addImgUrl: [],
    imgs: [],
    all_file_path: [],
    file_id: [],
    current_file_path: [],
    current_file_id: []

  },
  addImg() {
   wx.chooseMedia({
      count: 4,
      mediaType: ['image'],
      sourceType: ['album', 'camera'],
      sizeType: ['compressed'],
      success: async function (res) {
        var tempFilePaths = res.tempFiles.map(file => file.tempFilePath);
        var existingPaths = that.data.addImgUrl;

        // 截取前 4 张图片
        var newPaths = tempFilePaths.slice(0, 4 - existingPaths.length);
        var remainingPaths = tempFilePaths.slice(newPaths.length);

        if (remainingPaths.length > 0 && remainingPaths.length < newPaths.length) {
          // 剩余图片数量不足以上传时，不上传新的图片
          wx.showToast({
            title: '最多上传四张',
            icon: 'error',
          });
          return;
        }

        if (existingPaths.length + newPaths.length > 4) {
          // 添加的图片超过了限制
          wx.showToast({
            title: '最多上传四张',
            icon: 'error',
          });
          return;
        }

        for (var i = 0; i < newPaths.length; i++) {
          var path = newPaths[i];
          if (existingPaths.indexOf(path) !== -1) {
            wx.showToast({
              title: '该照片已经存在',
              icon: 'none'
            });
            continue;
          }
          if (that.data.addImgUrl.length > 3) {
            wx.showToast({
              title: '最多上传四张',
              icon: 'error',
            })
            return
          }
          existingPaths.push(path);

          try {
            var result = await that.uploadFile(path);
            var data = JSON.parse(result.data);
            console.log('data data',data);
            var file_path = app.globalData.URL + data.detail.path + data.detail.name;
            var file_id = data.detail.id;
            that.setData({
              current_file_path: [...that.data.current_file_path, file_path],
              current_file_id: [...that.data.current_file_id, file_id]
            });
          } catch (err) {
            console.error('上传失败', err);
          }
        }

        if (remainingPaths.length > 0) {
          // 存在剩余图片，继续调用选择图片 API
          wx.chooseMedia({
            count: remainingPaths.length,
            mediaType: ['image'],
            sourceType: ['album', 'camera'],
            sizeType: ['compressed'],
            success: async function (res) {
              var tempFilePaths = res.tempFiles.map(file => file.tempFilePath);

              // 递归调用 addImg1 函数，继续上传剩余图片
              that.addImg(tempFilePaths);
            }
          });
        } else {
          // 所有图片上传完成，更新数据
          var allFilePaths = [...that.data.all_file_path];
          var allFileIds = [...that.data.file_id];

          for (var i = 0; i < that.data.current_file_id.length; i++) {
            if (allFileIds.indexOf(that.data.current_file_id[i]) === -1) {
              allFileIds.push(that.data.current_file_id[i]);
              allFilePaths.push(that.data.current_file_path[i])
            }
          }

          that.setData({
            addImgUrl: existingPaths,
            imgs: existingPaths,
            all_file_path: allFilePaths,
            file_id: allFileIds
          });
          console.log('file_id1 final', that.data.file_id,that.data.all_file_path);
        }
      }
    });
},
    

  uploadFile(path) {
    return new Promise((resolve, reject) => {
      wx.uploadFile({
        url: app.globalData.URL + 'api/common/upload',
        filePath: path,
        name: 'file',
        success: function (res) {
          resolve(res);
        },
        fail: function (err) {
          reject(err);
        }
      });
    });
  },

    // 点击已选图片进行删除
  imgSingleDel(e) {
    var that = this;
    var index = e.currentTarget.dataset.index;
    var current_file_path = that.data.current_file_path;
    var current_file_id = that.data.current_file_id;
    var all_file_path = that.data.all_file_path;
    var file_id = that.data.file_id;
    var addImgUrl = this.data.addImgUrl;

    wx.showModal({
      title: '提示',
      content: '确定要删除该图片吗？',
      success(res) {
        if (res.confirm) {
          // 从 current_file_path1 和 current_file_id1 中删除对应的文件信息
          current_file_path.splice(index, 1);
          current_file_id.splice(index, 1);
          all_file_path.splice(index, 1);
          file_id.splice(index, 1);
          addImgUrl.splice(index, 1);

          that.setData({
            current_file_path,
            current_file_id,
            all_file_path,
            file_id,
            addImgUrl
          });

          console.log('file_id', file_id);
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })
  },

  // 图片预览
  previewImg(e) {
    let url = e.currentTarget.dataset.url;
    console.log('url', url);
    wx.previewImage({
      current: url,
      urls: this.data.imgs
    })
  },