微信小程序实现图片上传、删除和预览功能的方法

微信小程序作为一种相对于传统App更加轻量级且更加便捷的平台，被越来越多的企业和开发者青睐。其中，图片上传、删除和预览功能作为小程序中常见的功能，是小程序开发中不可避免的问题。

本文将介绍微信小程序实现图片上传、删除和预览功能的具体方法，希望能对小程序开发者有所帮助。

一、图片上传

首先，我们需要在小程序的wxml文件中添加一个图片上传组件：

<view class="upload-wrap">
  <image class="upload-pic" src="{{ imgUrl }}"></image>
  <view class="upload-btn">上传图片</view>
  <input class="file-input" type="file" accept="image/*" bindtap="chooseImage"></input>
</view>

其中，imgUrl是图片的地址，chooseImage是选择图片的方法。接着，在小程序的js文件中定义这个方法：

chooseImage: function (e) {
  var that = this;
  wx.chooseImage({
    count: 1, // 最多可以选择的图片张数，默认9
    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
    success: function (res) {
      // tempFilePath可以作为img标签的src属性显示图片
      var tempFilePaths = res.tempFilePaths;
      that.setData({
        imgUrl: tempFilePaths[0]
      })
    }
  })
}

其中，wx.chooseImage是图片选择的API，res.tempFilePaths是图片的临时文件路径，可以将其上传至服务器保存。

二、图片删除

当用户上传图片后，可能需要删除当前的图片，此时可以在小程序中添加一个删除按钮，当用户点击该按钮时，就可以删除当前的图片。

在wxml文件中添加一个删除按钮：

<view class="cancel-btn" bindtap="cancelImage">删除</view>

然后在js文件中定义cancelImage方法：

cancelImage: function () {
  this.setData({
    imgUrl: ''
  })
}

当用户点击删除按钮时，就会将当前的图片路径设置为空，即删除成功。

三、图片预览

小程序支持点击图片后进行预览，用户可以更加清晰地看到图片的细节。

在wxml文件中添加一个预览图片的组件：

<image class="upload-pic" src="{{ imgUrl }}" mode="aspectFit" bindtap="previewImage"></image>

其中，bindtap属性绑定了一个previewImage方法。

在js文件中定义previewImage方法:

previewImage: function () {
  var that = this;
  wx.previewImage({
    current: that.data.imgUrl, // 当前显示图片的http链接
    urls: [that.data.imgUrl] // 需要预览的图片http链接列表
  })
}

当用户点击图片时，就会调用previewImage方法，会打开一个图片预览界面，用户可以左右滑动预览所有的图片细节。

以上就是实现微信小程序图片上传、删除和预览功能的具体方法，希望能对小程序开发者有所帮助。