微信小程序wx.chooseImage和wx.previewImage的综合使用（图片上传可以限制个数）

微信小程序中，wx.chooseImage（选择图片） 和 wx.previewImage（预览图片） 是最常用的一对图片处理 API。你可以把它们配合起来使用，实现一个“上传图片 + 限制数量 + 支持预览 + 删除”的完整功能。

✅ 效果需求

你要实现的功能通常是这样：

• 用户最多只能选择 N 张图片
• 点击图片可以 预览
• 可以 删除某张已选图片
• 支持继续添加，直到达到最大数量

✅ 相关 API 简介

✅ 示例代码（最多选择 5 张图片）

💡 WXML

<view class="img-container">
  <block wx:for="{{imgList}}" wx:key="index">
    <view class="img-item">
      <image src="{{item}}" bindtap="previewImage" data-index="{{index}}"></image>
      <text class="delete-btn" bindtap="deleteImage" data-index="{{index}}">×</text>
    </view>
  </block>

  <view class="upload-btn" wx:if="{{imgList.length < maxImages}}" bindtap="chooseImage">
    <text>+</text>
  </view>
</view>

💡 JS

Page({
  data: {
    imgList: [],           // 已选图片列表
    maxImages: 5           // 最大选择数量
  },

  // 选择图片
  chooseImage() {
    const that = this;
    const remaining = that.data.maxImages - that.data.imgList.length;

    wx.chooseImage({
      count: remaining,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success(res) {
        const newImages = res.tempFilePaths;
        that.setData({
          imgList: that.data.imgList.concat(newImages)
        });
      }
    });
  },

  // 预览图片
  previewImage(e) {
    const index = e.currentTarget.dataset.index;
    wx.previewImage({
      current: this.data.imgList[index],
      urls: this.data.imgList
    });
  },

  // 删除图片
  deleteImage(e) {
    const index = e.currentTarget.dataset.index;
    let list = this.data.imgList;
    list.splice(index, 1);
    this.setData({ imgList: list });
  }
});

✅ 样式建议（WXSS）

.img-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
}

.img-item {
  position: relative;
  width: 150rpx;
  height: 150rpx;
}

.img-item image {
  width: 100%;
  height: 100%;
  border-radius: 10rpx;
}

.delete-btn {
  position: absolute;
  top: -10rpx;
  right: -10rpx;
  background: red;
  color: white;
  border-radius: 50%;
  padding: 4rpx;
  font-size: 20rpx;
}

.upload-btn {
  width: 150rpx;
  height: 150rpx;
  border: 2rpx dashed #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 60rpx;
  color: #999;
  border-radius: 10rpx;
}

✅ 上传图片到后台（可选）

如果你还需要将图片上传到服务端，可以在 chooseImage 的 success 回调中执行：

wx.uploadFile({
  url: 'https://example.com/upload',
  filePath: tempFilePath,
  name: 'file',
  success(res) {
    // 后台返回的图片地址
    const serverImage = JSON.parse(res.data).url;
  }
});

🧠 总结