微信小程序实现图片上传放大预览删除代码

下面是微信小程序实现图片上传、放大预览、删除的完整攻略：

1. 实现图片上传

在小程序中，可以使用wx.chooseImage()方法实现图片的上传，该方法会调起用户手机的相册或相机，返回选择的图片信息。

首先，需要在页面中添加一个按钮，绑定一个事件函数，该函数调用wx.chooseImage()方法，实现图片上传。

### WXML代码
<button type="primary" bindtap="chooseImage">选择图片</button>

### JS代码
Page({
  chooseImage: function () {
    wx.chooseImage({
      count: 1, // 限制上传的图片数量
      sizeType: ['original', 'compressed'], // 指定图片的类型
      sourceType: ['album', 'camera'], // 指定图片的来源
      success: res => {
        // 上传成功后的处理逻辑
        console.log(res.tempFilePaths[0])
      },
      fail: err => {
        console.error(err)
      }
    })
  }
})

2. 实现图片放大预览

在小程序中，可以使用wx.previewImage()方法实现图片的放大预览，该方法会调起微信自带的图片预览组件。

在选择图片之后，可以在页面中添加一个图片标签，绑定一个事件函数，该函数调用wx.previewImage()方法，实现图片的放大预览。

### WXML代码
<button type="primary" bindtap="chooseImage">选择图片</button>
<image src="{{imageSrc}}" mode="scaleToFill" bindtap="previewImage" />

### JS代码
Page({
  data: {
    imageSrc: ''
  },
  chooseImage: function () {
    wx.chooseImage({
      count: 1, // 限制上传的图片数量
      sizeType: ['original', 'compressed'], // 指定图片的类型
      sourceType: ['album', 'camera'], // 指定图片的来源
      success: res => {
        this.setData({
          imageSrc: res.tempFilePaths[0]
        })
      },
      fail: err => {
        console.error(err)
      }
    })
  },
  previewImage: function () {
    wx.previewImage({
      urls: [this.data.imageSrc] // 需要预览的图片链接列表
    })
  }
})

3. 实现图片删除

在小程序中，可以使用wx.showModal()方法实现图片的删除，该方法会调起微信自带的模态框。

在选择图片之后，可以在页面中添加一个图片标签，并添加一个删除按钮，绑定一个事件函数，该函数调用wx.showModal()方法，弹出模态框，并提示用户是否删除图片。

### WXML代码
<button type="primary" bindtap="chooseImage">选择图片</button>
<image src="{{imageSrc}}" mode="scaleToFill" bindtap="previewImage" />
<button type="warn" bindtap="deleteImage">删除图片</button>

### JS代码
Page({
  data: {
    imageSrc: ''
  },
  chooseImage: function () {
    wx.chooseImage({
      count: 1, // 限制上传的图片数量
      sizeType: ['original', 'compressed'], // 指定图片的类型
      sourceType: ['album', 'camera'], // 指定图片的来源
      success: res => {
        this.setData({
          imageSrc: res.tempFilePaths[0]
        })
      },
      fail: err => {
        console.error(err)
      }
    })
  },
  previewImage: function () {
    wx.previewImage({
      urls: [this.data.imageSrc] // 需要预览的图片链接列表
    })
  },
  deleteImage: function () {
    wx.showModal({
      title: '提示',
      content: '是否删除该图片？',
      success: res => {
        if (res.confirm) {
          this.setData({
            imageSrc: ''
          })
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })
  }
})

以上是微信小程序实现图片上传、放大预览、删除的完整攻略。需要注意的是，上传的图片需要保存到服务器或者本地的缓存中，避免上传失效。