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

在微信小程序的开发过程中，图片选择与上传是非常常见的功能。无论是用户头像设置、商品图片上传还是其他场景中的图片分享，这些功能都离不开对图片的选择和处理。本文将详细介绍如何在微信小程序中实现图片的选择与上传，并提供多个实用的代码示例。

基本概念

在微信小程序中，wx.chooseImage 和 wx.uploadFile 是两个核心API，它们分别用于选择图片和上传文件到服务器。

• wx.chooseImage: 用于从本地相册选择图片或使用相机拍照。
• wx.uploadFile: 用于将图片等文件上传至开发者指定的服务器。

示例一：选择图片

首先，我们来看一下如何使用 wx.chooseImage API 选择一张或多张图片。

// 选择图片
wx.chooseImage({
   
  count: 9, // 默认9
  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
  sourceType: ['album', 'camera'], // 从相册选择或使用相机，默认二者都有
  success(res) {
   
    const tempFilePaths = res.tempFilePaths;
    console.log('Selected image file paths:', tempFilePaths);
  }
});

示例二：预览图片

当用户选择了图片后，可以使用 wx.previewImage 预览图片。

// 预览图片
wx.previewImage({
   
  current: tempFilePaths[0], // 当前显示图片的http链接
  urls: tempFilePaths // 需要预览的图片http链接列表
});

示例三：上传图片到服务器

接下来，我们需要将选好的图片上传到服务器。这通常涉及到使用 wx.uploadFile API。

// 上传图片到服务器
wx.uploadFile({
   
  url: 'https://yourserver.com/upload', // 开发者服务器 url
  filePath: tempFilePaths[0],
  name: 'file',
  formData: {
   
    'user': 'test'
  },</