微信小程序增删图片怎么弄 微信小程序增删图片怎么弄的

微信小程序中增删图片主要涉及到前端界面的设计和后端数据的处理，这里我会分步骤介绍如何在微信小程序中实现图片的增加和删除功能。

1. 前端界面设计

1.1 图片展示区域

你需要一个区域来展示图片，这通常是一个<image>组件的列表。

<view class="image-list">
  <block wx:for="{{imageList}}" wx:key="unique">
    <image class="image-item" src="{{item}}" data-src="{{item}}" mode="aspectFill" bindtap="previewImage" />
  </block>
</view>

1.2 图片上传按钮

用户可以通过点击一个按钮来上传图片。

<button class="upload-btn" bindtap="chooseImage">上传图片</button>

1.3 CSS样式

为上述元素添加一些基本的CSS样式。

.image-list {
  display: flex;
  flex-wrap: wrap;
  margin: 10px;
}
.image-item {
  width: 100px;
  height: 100px;
  margin: 5px;
  position: relative;
}
.upload-btn {
  margin: 10px;
}

2. 后端接口设计

你需要设计两个后端接口，一个用于上传图片，另一个用于删除图片。

2.1 图片上传接口

这个接口负责接收前端上传的图片，并将其保存到服务器。

2.2 图片删除接口

这个接口负责根据图片的唯一标识（如URL）来删除服务器上的图片。

3. 前端逻辑实现

3.1 选择图片

使用wx.chooseImage来让用户选择图片，并将其保存到本地。

Page({
  data: {
    imageList: []
  },
  chooseImage: function() {
    const that = this;
    wx.chooseImage({
      count: 1, // 默认9，设置图片的选择数量
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function(res) {
        // 返回选定照片的本地文件路径列表
        const tempFilePaths = res.tempFilePaths;
        that.uploadImage(tempFilePaths[0]); // 假设只选择了一张图片
      }
    });
  },
  uploadImage: function(filePath) {
    const that = this;
    wx.uploadFile({
      url: 'https://your-server.com/upload', // 你的图片上传接口
      filePath: filePath,
      name: 'file',
      success: function(res) {
        const data = JSON.parse(res.data);
        if (data.success) {
          that.addImageToList(data.url); // 服务器返回的图片URL
        } else {
          wx.showToast({
            title: '上传失败',
            icon: 'none'
          });
        }
      }
    });
  },
  addImageToList: function(url) {
    this.setData({
      imageList: [...this.data.imageList, url]
    });
  }
});

3.2 删除图片

为每个图片项添加一个删除按钮，并实现删除逻辑。

<view class="image-list">
  <block wx:for="{{imageList}}" wx:key="unique">
    <view class="image-item" data-src="{{item}}" bindtap="previewImage">
      <image src="{{item}}" mode="aspectFill" />
      <button class="delete-btn" bindtap="deleteImage" data-src="{{item}}">删除</button>
    </view>
  </block>
</view>

Page({
  // ...之前的代码
  deleteImage: function(e) {
    const src = e.currentTarget.dataset.src;
    wx.showModal({
      title: '提示',
      content: '确定要删除这张图片吗？',
      success: function(res) {
        if (res.confirm) {
          const that = this;
          wx.request({
            url: 'https://your-server.com/delete', // 你的图片删除接口
            method: 'POST',
            data: { url: src },
            success: function(res) {
              if (res.data.success) {
                that.removeImageFromList(src);
              } else {
                wx.showToast({
                  title: '删除失败',
                  icon: 'none'
                });
              }
            }
          });
        }
      }
    });
  },
  removeImageFromList: function(url) {
    this.setData({
      imageList: this.data.imageList.filter(item => item !== url)
    });
  }
});

4. 注意事项

- 确保你的服务器端接口能够处理图片的上传和删除请求。

- 考虑到用户体验，上传和删除操作应该有相应的加载提示和成功/失败提示。

- 考虑到安全性，上传的图片应该进行安全检查，避免上传恶意文件。

- 考虑到性能，图片上传和删除操作可能需要一些时间，应该提供进度反馈。