微信小程序实现拍照与图片上传功能

在微信小程序开发过程中，实现用户拍照或选择图片并上传至服务器是一项常见需求。本文将详细介绍如何使用微信小程序提供的API来完成这一功能。

调用拍照或选择图片API

开发者可以通过调用 wx.chooseImage 方法来让用户从相册选择图片或直接拍照。此方法支持设置图片的数量限制、尺寸类型（原图或压缩图）以及来源（相册或相机）。

// 示例代码
wx.chooseImage({
  count: 1, // 设置最多可以选择的图片张数
  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
  sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
  success: function (res) {
    // 成功选择后返回选定照片的本地文件路径列表
    const tempFilePaths = res.tempFilePaths;
    // 更新界面显示所选图片
    that.setData({
      imageSrc: tempFilePaths[0]
    });
  }
});

上传图片至服务器

选择图片后，可以使用 wx.uploadFile 方法将图片上传至服务器。此方法需要提供上传的目标URL、本地文件路径等参数。

// 示例代码
wx.uploadFile({
  url: 'https://yourserver.com/upload', // 替换为你的服务器地址
  filePath: that.data.imageSrc,
  name: 'file',
  formData: {
    'user': 'test'
  },
  success: function (res) {
    // 将返回的数据从字符串转为对象
    const data = JSON.parse(res.data);
    if (data.success) {
      wx.showToast({
        title: '上传成功',
        icon: 'success',
        duration: 2000
      });
    } else {
      wx.showToast({
        title: '上传失败',
        icon: 'none',
        duration: 2000
      });
    }
  },
  fail: function (err) {
    console.error(err);
  }
});

注意事项

• 调用 wx.chooseImage() 时会自动弹出选择窗口，无需额外调用 wx.showActionSheet()。


• 上传文件时，filePath 必须是一个有效的本地文件路径。如果是多张图片，则需要遍历每个路径分别上传。


• 服务器返回的数据通常是字符串形式，需使用 JSON.parse() 方法将其转换为Javascript对象以便于处理。

以上就是在微信小程序中实现拍照与图片上传的基本步骤。希望本文能对你有所帮助，如果你有任何问题或建议，欢迎留言交流！