微信小程序实现上传多张图片、删除图片

实现上传多张图片、删除图片的微信小程序攻略如下：

上传多张图片

1. 引入wx.chooseImage API

在小程序页面中，使用wx.chooseImage API即可调用微信客户端的图片选择功能，将选择的图片上传到服务器。

示例代码：

wx.chooseImage({
  success: function (res) {
    var tempFilePaths = res.tempFilePaths;
    // 上传图片到服务器
    // ...
  }
})

2. 将图片上传到服务器

在将选择的图片上传到服务器之前，需要先将选择的图片预览展示出来。可以使用wx.previewImage API来实现预览。

示例代码：

wx.previewImage({
  urls: tempFilePaths
})

然后，将选择的图片上传到服务器。可以使用wx.uploadFile API来实现图片上传，并在上传成功之后，将服务器返回的图片路径保存下来。

示例代码：

wx.uploadFile({
  url: 'your_upload_url',
  filePath: tempFilePaths[i],
  name: 'file',
  success: function (res) {
    var data = JSON.parse(res.data);
    if (data.code == 0) {
      var imageUrl = data.url;
      // 将服务器返回的图片路径保存到本地
      // ...
    }
  }
})

3. 利用wx:for循环展示已上传的图片

在将上传成功的图片路径保存到本地之后，可以利用wx:for循环来展示已上传的图片。

示例代码：

<view wx:for="{{imageList}}" wx:key="{{index}}">
  <image src="{{item}}" mode="aspectFit" bindtap="previewImage"></image>
</view>

其中，imageList为保存已上传图片路径的数组，通过wx:for循环来展示每一张已上传的图片，并通过bindtap绑定预览图片的事件。

4. 注意事项

上传多张图片时，需要注意以下问题：

• 需要设置图片上传的并发量，避免因上传文件过多而导致小程序崩溃；
• 需要限制用户上传图片的大小和数量，避免导致服务器存储空间不足；
• 需要在用户上传过程中提供上传进度提示，以便用户了解上传进度。

删除图片

1. 实现图片删除功能

用户可以通过长按图片，在弹出的菜单中选择“删除”来删除已上传的图片。

示例代码：

previewImage: function (e) {
  var that = this;
  var imageUrl = e.currentTarget.dataset.src;
  wx.showActionSheet({
    itemList: ['预览图片', '删除图片'],
    success: function (res) {
      switch (res.tapIndex) {
        case 0:
          wx.previewImage({
            urls: that.data.imageList,
            current: imageUrl
          });
          break;
        case 1:
          var imageList = that.data.imageList;
          imageList.splice(imageList.indexOf(imageUrl), 1);
          that.setData({
            imageList: imageList
          });
          // 向服务器发送删除请求
          // ...
          break;
      }
    }
  })
}

在上述代码中，通过wx.showActionSheet API来弹出菜单，用户选择“删除图片”时，使用splice方法从imageList中删除指定的图片路径，并通过setData方法更新页面的展示。

2. 向服务器发送删除请求

在删除已上传的图片时，需要向服务器发送删除请求，避免服务器存储过多不必要的图片占用空间。

示例代码：

var deleteImageUrl = "your_delete_url";
wx.request({
  url: deleteImageUrl,
  method: 'DELETE',
  data: {
    imageUrl: imageUrl
  },
  header: {
    'content-type': 'application/json'
  }
});

在上述代码中，使用wx.request方法向服务器发送DELETE请求，请求携带的参数为要删除的图片路径imageUrl，服务器在接收到DELETE请求后，根据携带的参数进行图片删除操作。

3. 注意事项

删除上传的图片时，需要注意以下问题：

• 删除图片前需要先确定用户是否有权限进行删除操作；
• 删除操作需要向服务器发送删除请求，并在删除操作成功后将本地的图片路径从数组中删除；
• 避免因误操作或不必要的删除操作导致服务器存储空间不足。