微信小程序开发中的图片选择与上传

微信小程序开发中的图片选择与上传是一个常见的功能需求，本文将使用代码案例详细介绍如何实现图片选择与上传功能。

一、图片选择功能

在微信小程序中，可以通过wx.chooseImage方法实现图片选择功能。下面是一个简单的代码案例：

// 在点击按钮时触发选择图片事件
chooseImage: function() {
  wx.chooseImage({
    count: 1, // 最多可以选择的图片张数，默认9
    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
    success: function(res) {
      // 选择图片成功后的回调函数
      var tempFilePaths = res.tempFilePaths;
      // 将选择的图片路径保存到data中，用于后续的图片上传操作
      that.setData({
        imagePath: tempFilePaths[0]
      });
    }
  })
}

上述代码中，wx.chooseImage方法用于选择图片，通过传入相关配置参数，如count表示最多可以选择的图片张数，sizeType表示图片的类型，sourceType表示来源等。选择图片成功后，可以通过success回调函数获取选择的图片路径，然后将其保存到data中，以便后续的图片上传操作使用。

二、图片上传功能

在微信小程序中，可以通过wx.uploadFile方法实现图片上传功能。下面是一个简单的代码案例：

// 在点击按钮时触发图片上传事件
uploadImage: function() {
  wx.uploadFile({
    url: 'http://example.com/upload', // 图片上传接口的url
    filePath: that.data.imagePath, // 图片的本地路径
    name: 'file', // 上传的图片名称
    formData: {
      user: 'test' // 其他上传的参数
    },
    success: function(res) {
      // 图片上传成功后的回调函数
      var data = res.data;
      // 处理上传成功后的操作
    },
    fail: function(res) {
      // 图片上传失败后的回调函数
      console.log(res);
    }
  })
}

上述代码中，wx.uploadFile方法用于上传图片，通过传入相关配置参数，如url表示图片上传接口的url，filePath表示图片的本地路径，name表示上传的图片名称，formData表示其他上传的参数等。上传图片成功后，可以通过success回调函数获取上传成功后的返回结果，然后进行相关操作。

三、图片选择与上传综合案例

下面是一个将图片选择与上传功能综合起来的代码案例：

Page({
  data: {
    imagePath: ''
  },
  chooseImage: function() {
    var that = this;
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: function(res) {
        var tempFilePaths = res.tempFilePaths;
        that.setData({
          imagePath: tempFilePaths[0]
        });
      }
    })
  },
  uploadImage: function() {
    var that = this;
    wx.uploadFile({
      url: 'http://example.com/upload',
      filePath: that.data.imagePath,
      name: 'file',
      formData: {
        user: 'test'
      },
      success: function(res) {
        var data = res.data;
        // 处理上传成功后的操作
        wx.showToast({
          title: '图片上传成功',
          icon: 'success',
          duration: 2000
        })
      },
      fail: function(res) {
        console.log(res);
        wx.showToast({
          title: '图片上传失败',
          icon: 'none',
          duration: 2000
        })
      }
    })
  }
})

上述代码中，通过data对象保存选择的图片路径，然后在选择图片成功后将路径赋值给imagePath，供上传图片使用。在点击上传按钮时，触发图片上传事件，调用wx.uploadFile方法进行图片的上传操作。上传成功后，通过wx.showToast方法展示上传结果。

通过以上的代码案例，我们可以实现微信小程序中的图片选择与上传功能。当然，实际开发中还需根据具体需求进行相应的配置和处理，如图片格式的限制、图片大小的判断、进度条的展示等。