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

微信小程序开发中，图片选择与上传是常见的功能需求之一。本文将详细介绍如何实现图片选择与上传的功能，并提供相应的代码示例。

1. 图片选择

在微信小程序中，可以使用wx.chooseImage方法来实现图片选择功能。该方法允许用户从本地相册选择图片或使用相机拍摄图片。

代码示例：

// 页面中的按钮点击事件
chooseImage: function() {
  wx.chooseImage({
    count: 1,  // 最多可以选择的图片数量
    sizeType: ['original', 'compressed'],  // 可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album', 'camera'],  // 可以指定来源是相册还是相机，默认二者都有
    success: function(res) {
      // 返回选定照片的本地文件路径列表，tempFilePaths可以作为img标签的src属性显示图片
      var tempFilePaths = res.tempFilePaths;
      console.log(tempFilePaths);
    }
  })
}

上述代码中，count参数指定了最多可以选择的图片数量，sizeType参数指定了图片的类型（原图或压缩图），sourceType参数指定了选择图片的来源（相册或相机）。

选择图片成功后，会返回一个包含选定照片的本地文件路径列表，可以将其中的路径设置为img标签的src属性，来显示图片。

1. 图片上传

图片上传的实现方式有多种，可以使用微信小程序提供的wx.uploadFile方法，也可以使用第三方库（如wx.request及其封装库wx.promise）来实现。

2.1 使用wx.uploadFile

wx.uploadFile方法可以将本地资源上传到服务器。需要注意的是，上传文件时要求使用multipart/form-data格式。

代码示例：

// 页面中的按钮点击事件
uploadImage: function() {
  var that = this;
  wx.chooseImage({
    count: 1,
    sizeType: ['original', 'compressed'],
    sourceType: ['album', 'camera'],
    success: function(res) {
      var tempFilePaths = res.tempFilePaths;
      // 上传文件
      wx.uploadFile({
        url: 'https://example.com/upload',  // 上传接口地址
        filePath: tempFilePaths[0],  // 要上传文件资源的路径
        name: 'file',  // 服务器定义的文件对应的 key
        formData: {
          'user': 'test'  // 其他额外的参数
        },
        success: function(res) {
          var data = res.data;
          // 上传成功后的处理逻辑
          console.log(data);
        }
      })
    }
  })
}

上述代码中，wx.uploadFile方法用来上传文件。其中，url参数指定了上传接口地址，filePath参数指定了要上传文件资源的路径，name参数指定了服务器定义的文件对应的 key，formData参数可以传递其他额外的参数。

2.2 使用wx.request及其封装库wx.promise

wx.request方法是微信小程序中用于发起网络请求的API。可以使用该方法实现图片上传功能。为了方便处理异步操作，可以使用wx.promise库对wx.request进行封装。

代码示例：

// 引入wx.promise库
const wxp = require('wx-promise')

// 页面中的按钮点击事件
uploadImage: function() {
  wx.chooseImage({
    count: 1,
    sizeType: ['original', 'compressed'],
    sourceType: ['album', 'camera'],
    success: function(res) {
      var tempFilePaths = res.tempFilePaths;
      // 上传文件
      wxp.uploadFile({
        url: 'https://example.com/upload',  // 上传接口地址
        filePath: tempFilePaths[0],  // 要上传文件资源的路径
        name: 'file',  // 服务器定义的文件对应的 key
        formData: {
          'user': 'test'  // 其他额外的参数
        }
      }).then(function(res) {
        var data = res.data;
        // 上传成功后的处理逻辑
        console.log(data);
      }).catch(function(error) {
        // 上传失败的处理逻辑
        console.log(error);
      })
    }
  })
}

上述代码中，首先通过require引入了wx-promise库，该库对wx.request进行了封装，返回了一个promise对象。然后，在按钮点击事件中，使用wx.chooseImage选择图片，并在成功回调中调用wxp.uploadFile方法进行文件上传。上传成功后，可以通过then方法获取返回的数据，上传失败则通过catch方法处理错误。

以上就是关于微信小程序中图片选择与上传功能的详细介绍和代码示例。希望对您有所帮助！