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

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

1. 图片选择 首先，我们需要在小程序中引入一个选择图片的控件，这可以通过<button>标签来实现。在点击按钮时，触发选择图片的事件，并将选择的图片保存到一个数组中。

<view>
  <button bindtap="chooseImage">选择图片</button>
  <image wx:for="{{images}}" wx:key="{{index}}" src="{{item}}" mode="aspectFit"></image>
</view>

Page({
  data: {
    images: []
  },
  chooseImage: function () {
    var self = this;
    wx.chooseImage({
      success: function (res) {
        var tempFilePaths = res.tempFilePaths;
        self.setData({
          images: tempFilePaths
        })
      }
    })
  }
})

在上面的代码中，我们首先在<view>标签中添加一个选择图片的按钮，然后在按钮的事件处理函数中调用wx.chooseImage接口来选择图片。选择图片成功后，将选择的图片保存到images数组中，并通过setData方法更新视图。

1. 图片上传 接下来，我们需要实现图片的上传功能。在小程序中，我们可以通过wx.uploadFile接口来实现文件上传。在上传图片之前，我们需要将图片的本地路径转换为临时文件路径。

uploadImage: function () {
  var self = this;
  var images = self.data.images;
  for (var i = 0; i < images.length; i++) {
    wx.uploadFile({
      url: 'https://example.com/upload', // 上传接口地址
      filePath: images[i],
      name: 'file',
      success: function (res) {
        console.log(res.data)
      }
    })
  }
}

在上面的代码中，我们首先获取到选择的图片数组images，然后通过wx.uploadFile接口将图片上传到服务器。在上传成功后，可以通过success回调函数获取到服务器返回的数据。

1. 完整代码案例 下面是一个完整的图片选择与上传功能的代码案例：

<view>
  <button bindtap="chooseImage">选择图片</button>
  <button bindtap="uploadImage">上传图片</button>
  <image wx:for="{{images}}" wx:key="{{index}}" src="{{item}}" mode="aspectFit"></image>
</view>

Page({
  data: {
    images: []
  },
  chooseImage: function () {
    var self = this;
    wx.chooseImage({
      success: function (res) {
        var tempFilePaths = res.tempFilePaths;
        self.setData({
          images: tempFilePaths
        })
      }
    })
  },
  uploadImage: function () {
    var self = this;
    var images = self.data.images;
    for (var i = 0; i < images.length; i++) {
      wx.uploadFile({
        url: 'https://example.com/upload',
        filePath: images[i],
        name: 'file',
        success: function (res) {
          console.log(res.data)
        }
      })
    }
  }
})

在上面的代码中，我们通过<button>标签实现了选择图片和上传图片的功能，并将选择的图片保存到images数组中。在上传图片时，我们通过wx.uploadFile接口将图片上传到服务器，并在上传成功后打印出服务器返回的数据。

通过以上的代码案例，我们可以实现一个简单的图片选择与上传功能。开发者可以根据具体需求对代码进行调整和优化。