【微信小程序】小程序选择图片、上传、预览、删除

1.了解所需要用到的API

1.1wx.chooseImage(Object object)

从本地相册选择图片或使用相机拍照。

参数如下：

count	9	最多可以选择的图片张数
sizeType	['original', 'compressed']	所选的图片的尺寸
sourceType	['album', 'camera']	选择图片的来源
success		接口调用成功的回调函数
fail		接口调用失败的回调函数
complete		接口调用结束的回调函数（调用成功、失败都会执行）

original	原图
compressed	压缩图

album	从相册选图
camera	使用相机

 单个举例如下：

wx.chooseImage({
  count: 1,
  sizeType: ['original', 'compressed'],
  sourceType: ['album', 'camera'],
  success (res) {
    // tempFilePath可以作为img标签的src属性显示图片
    const tempFilePaths = res.tempFilePaths
  }
})

1.2 wx.uploadFile(Object object)

将本地资源上传到服务器。客户端发起一个 HTTPS POST 请求，其中 content-type 为 multipart/form-data。

具体参数如下：

url	string	开发者服务器地址
filePath	string	要上传文件资源的路径
name	string	文件对应的 key，开发者在服务端可以通过这个 key 获取文件的二进制内容
header	Object	HTTP 请求 Header，Header 中不能设置 Referer
formData	Object	HTTP 请求中其他额外的 form data
success	function	接口调用成功的回调函数
fail	function	接口调用失败的回调函数
complete	function	接口调用结束的回调函数（调用成功、失败都会执行）

data	string	开发者服务器返回的数据
statusCode	number	开发者服务器返回的 HTTP 状态码

单个举例如下：

wx.chooseImage({
  success (res) {
    const tempFilePaths = res.tempFilePaths
    wx.uploadFile({
      url: 'https://example.weixin.qq.com/upload', //仅为示例，非真实的接口地址
      filePath: tempFilePaths[0],
      name: 'file',
      formData: {
        'user': 'test'
      },
      success (res){
        const data = res.data
        //do something
      }
    })
  }
})

选择图片和上传图片结合封装函数为：

 
  //上传图片接口封装
 function  moreImages(imgListe, imageList, maxLength, count, sizeType, sourceType, url, formData) {
    var that = this;
    if (imageList.length >= maxLength) {
      var content = '最多上传'+maxLength+'张图片！';
      wx.showModal({
        showCancel: false,
        title: '温馨提示',
        content: content,
      })
    } else {
      wx.chooseImage({
        count: count, //最多选择7张图片
        sizeType: sizeType, // 可以指定是原图还是压缩图，默认二者都有
        sourceType: sourceType, // 可以指定来源是相册还是相机，默认二者都有
        success: function(res) {
          wx.showToast({
            title: '正在上传...',
            icon: 'loading',
            mask: true,
            duration: 10000
          })
          const tempFilePaths = res.tempFilePaths;
          wx.uploadFile({
            url: url, // 仅为示例，非真实的接口地址
            filePath: tempFilePaths[0],
            formData: formData,
            name: 'file',
            success(res) {
              var imgurls = JSON.parse(res.data).data;
              imgListe.push(imgurls);
              console.log(imgListe);
            }
          })
          wx.hideToast();
        },
        fail: function(res) {
 
        }
      })
    }
  },

参数如下可写为(进仅供参考)：

    var imgListe = that.data.imgListe; //传入后台的图片数组
    var imageList = that.data.imageList; //页面显示的图片数组
    var maxLength = 7; //上传图片的最大值
    var count = 1; //选择图片的数量
    var sizeType = ['original', 'compressed'];  //所选的图片的尺寸
    var sourceType = ['album', 'camera']; //选择图片的来源 album 相册选图  camera 相机
    var url = config.DOMAIN_API.topic_uploadpic; //上传图片接口
    var formData = { //上传图片所需参数
      'user_id': app.globalData.uid,
      'type': 'feedback',
    };

具体调用方法如下：

调用上传图片接口
    redirect.moreImages(imgListe, imageList, maxLength, count, sizeType, sourceType, url, formData);

这就是上传图片函数封装的完整代码，简单明了易维护！