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

在微信小程序开发中，图片选择与上传是非常常见的功能。下面是一个详细的代码案例，包括了图片选择、预览和上传的完整流程。

请注意，以下代码仅供参考，具体实现方式可能因项目需求而有所不同。建议根据自己的项目需求进行相应修改。

1. 图片选择

首先，我们需要添加一个按钮，用于触发选择图片的操作。

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

在对应的页面JS文件中，我们添加一个选择图片的事件处理函数。

Page({
  chooseImage: function() {
    wx.chooseImage({
      count: 1, // 最多可选择的图片数量
      sizeType: ['original', 'compressed'], // 图片尺寸选择，original表示原图，compressed表示压缩图
      sourceType: ['album', 'camera'], // 图片来源选择，album表示相册，camera表示相机
      success: function(res) {
        // 选择图片成功时的回调函数
        var tempFilePaths = res.tempFilePaths
      }
    })
  }
})

在选择图片成功时的回调函数中，我们可以获取到选择的图片路径。这里的 tempFilePaths 是一个数组，因为我们设置了 count 的值为 1，所以这里的数组只包含一张图片的路径。

2. 图片预览

接下来，我们可以在页面中显示已选择的图片，并提供预览功能。

在HTML中，我们添加一个 image 标签，用于显示图片。

<view>
  <image src="{{imagePath}}" mode="aspectFill"></image>
  <button bindtap="previewImage">预览图片</button>
</view>

在对应的页面JS文件中，我们添加一个预览图片的事件处理函数。

Page({
  data: {
    imagePath: ''
  },
  chooseImage: function() {
    // ...
  },
  previewImage: function() {
    wx.previewImage({
      urls: [this.data.imagePath] // 需要预览的图片路径数组
    })
  }
})

在预览图片的事件处理函数中，我们使用 wx.previewImage 方法来预览图片。这里的 urls 参数是一个字符串数组，表示需要预览的图片路径。我们这里只有一张图片，所以数组中只有一个元素。

3. 图片上传

最后，我们可以将选择的图片上传到服务器。

在HTML中，我们添加一个按钮，用于触发上传图片的操作。

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

在对应的页面JS文件中，我们添加一个上传图片的事件处理函数。

Page({
  data: {
    imagePath: ''
  },
  chooseImage: function() {
    // ...
  },
  uploadImage: function() {
    var that = this

    // 上传图片到服务器
    wx.uploadFile({
      url: 'http://example.com/upload', // 服务器上传图片的接口地址
      filePath: that.data.imagePath, // 要上传的图片路径
      name: 'file', // 服务器接收图片的字段名
      success: function(res) {
        // 上传图片成功时的回调函数
        var data = res.data
        // 处理服务器返回的数据
      }
    })
  }
})

在上传图片成功时的回调函数中，我们可以处理服务器返回的数据。这里的 res.data 是服务器返回的数据，可以根据自己的需求进行相应的处理。

以上就是一个完整的图片选择与上传的代码案例。你可以根据自己的项目需求进行相应的修改和优化。

值得注意的是，在实际开发中，还需要考虑一些其他的因素，如图片压缩、图片大小限制、图片上传进度等。这里的代码只是一个基本的示例，仅供参考。