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

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

首先，我们需要在小程序的json配置文件中添加相应的权限配置，以确保能够访问相册和相机。在app.json文件中添加如下代码：

{
  "permission": {
    "scope.userLocation": {
      "desc": "用于选择图片"
    }
  }
}

接下来，在小程序的页面中添加一个按钮，用于触发选择图片的操作。在wxml文件中添加如下代码：

<button bindtap="chooseImage">选择图片</button>

然后，在对应的js文件中添加chooseImage方法，用于选择图片。该方法会调用小程序的接口wx.chooseImage来选择图片。选择图片后，会触发success回调函数，在该回调函数中可以获取到选择的图片的临时文件路径。在success回调函数中，我们可以将选择的图片展示到页面上。具体的代码如下：

Page({
  data: {
    images: []
  },
  chooseImage: function() {
    var that = this;
    wx.chooseImage({
      count: 9,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      success: function(res) {
        var tempFilePaths = res.tempFilePaths;
        that.setData({
          images: tempFilePaths
        });
      }
    })
  }
})

上述代码中，我们将选择的图片的临时文件路径存储在data的images属性中，并通过setData方法更新到页面中。

接下来，我们需要实现图片的上传功能。在小程序中，可以使用wx.uploadFile来上传文件。我们需要在js文件中添加一个uploadImage方法，用于上传图片。该方法会遍历选择的图片，逐个上传到服务器。上传成功后，会触发success回调函数，我们可以在该回调函数中处理上传成功后的操作。具体的代码如下：

Page({
  data: {
    images: []
  },
  chooseImage: function() {
    var that = this;
    wx.chooseImage({
      count: 9,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      success: function(res) {
        var tempFilePaths = res.tempFilePaths;
        that.setData({
          images: tempFilePaths
        });
      }
    })
  },
  uploadImage: function() {
    var that = this;
    var images = that.data.images;
    for (var i = 0; i < images.length; i++) {
      wx.uploadFile({
        url: 'https://example.com/upload', // 上传的接口地址
        filePath: images[i],
        name: 'file',
        formData: {
          'user': 'test'
        },
        success: function(res) {
          console.log(res.data); // 上传成功后的响应数据
        }
      })
    }
  }
})

上述代码中，我们通过wx.uploadFile将选择的图片逐个上传到服务器。上传的接口地址由url属性指定，上传的文件由filePath属性指定，上传的文件字段名由name属性指定，上传时附带的额外数据由formData属性指定。上传成功后，会触发success回调函数，我们可以在该回调函数中处理上传成功后的操作。

最后，我们需要在wxml文件中添加一个按钮，用于触发图片的上传操作。在wxml文件中添加如下代码：

<button bindtap="uploadImage">上传图片</button>

至此，我们已经实现了图片选择与上传功能。用户可以点击选择图片按钮，选择图片后，页面会展示选择的图片。点击上传图片按钮后，选择的图片会逐个上传到服务器。

总结起来，实现图片选择与上传功能的步骤如下：

1. 在json配置文件中添加相应的权限配置。
2. 在wxml文件中添加选择图片的按钮。
3. 在js文件中添加选择图片的方法，并将选择的图片展示到页面中。
4. 在wxml文件中添加上传图片的按钮。
5. 在js文件中添加上传图片的方法，并逐个上传到服务器。

以上只是一个简单的示例，实际开发中可能会有更多的需求和处理逻辑，但基本的实现思路是相通的。希望上述代码案例对您有所帮助。如有更多疑问，请随时提问。