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

微信小程序开发中的图片选择与上传是一个非常常见的功能，在实际开发中也非常常见。本文将通过详细的代码案例，来介绍微信小程序中图片的选择与上传的实现方法。

首先，我们需要在小程序的页面中添加一个图片选择的按钮，用户点击该按钮后可以选择本地图片进行上传。在小程序中，可以使用wx.chooseImage方法来选择图片。下面是一个示例代码：

// 在页面的wxml文件中添加一个按钮，并绑定一个点击事件
<button bindtap="chooseImage">选择图片</button>

// 在页面的js文件中定义选择图片的函数
chooseImage: function() {
  wx.chooseImage({
    count: 1, // 可选择图片的数量，默认为9
    sizeType: ['original', 'compressed'], // 可选择图片的类型，默认为原图和压缩图
    sourceType: ['album', 'camera'], // 可选择图片的来源，默认为相册和相机
    success: function(res) {
      var tempFilePaths = res.tempFilePaths // 图片的临时文件路径
      // 将选择的图片设置到页面的data中，以便后续使用
      that.setData({
        imageList: tempFilePaths
      })
    }
  })
}

在上述代码中，我们通过wx.chooseImage方法来选择图片，其中count属性可以设置选择图片的数量，sizeType属性可以设置选择图片的类型，sourceType属性可以设置选择图片的来源。选择完成后，success回调函数中的参数res中包含了用户选择图片的临时文件路径，我们可以将其设置到页面的data中，以便后续使用。

接下来，我们需要在小程序中将选择的图片上传到服务器。在小程序中，可以使用wx.uploadFile方法来上传文件。下面是一个示例代码：

// 在页面的js文件中定义上传图片的函数
uploadImage: function() {
  var imageList = this.data.imageList // 获取选择的图片路径
  var uploadUrl = 'https://example.com/upload' // 服务器上传接口的URL

  // 循环遍历图片列表，逐个上传图片
  for (var i = 0; i < imageList.length; i++) {
    var filePath = imageList[i] // 当前图片的路径
    var fileName = filePath.substr(filePath.lastIndexOf('/') + 1) // 获取图片的文件名

    // 调用wx.uploadFile方法上传图片
    wx.uploadFile({
      url: uploadUrl, // 上传接口的URL
      filePath: filePath, // 要上传的文件路径
      name: 'image', // 服务器接收文件的字段名
      formData: {
        'fileName': fileName // 上传文件的文件名
      },
      success: function(res) {
        // 上传成功后的处理逻辑
        console.log(res.data)
      },
      fail: function(res) {
        // 上传失败后的处理逻辑
        console.log(res.errMsg)
      }
    })
  }
}

在上述代码中，我们通过wx.uploadFile方法来上传图片，其中url属性可以设置上传接口的URL，filePath属性可以设置要上传的文件路径，name属性可以设置服务器接收文件的字段名，formData属性可以设置其他需要上传的参数。上传成功后，success回调函数中的参数res中包含了上传成功后服务器的返回数据，我们可以在这里进行处理。

需要注意的是，由于wx.uploadFile方法是异步执行的，所以在循环遍历图片列表上传图片时可能导致顺序错误。如果需要保证顺序正确，可以通过使用递归或Promise等方法来实现。

综上所述，以上就是微信小程序中图片选择与上传的实现方法的详细代码案例。通过以上代码，我们可以实现在小程序中选择本地图片并上传到服务器的功能。当然，在实际开发中可能还需要添加一些错误处理、进度显示等功能，这需要根据具体的需求进行扩展。希望本文的内容对你有所帮助。