小程序图片选择与预览功能实现

在小程序开发中，实现图片选择与预览功能是常见且实用的需求。通过以下简单的步骤，我们可以轻松完成这一功能，并注意一些关键细节。

1、图片选择功能

首先，我们需要使用小程序的 tt.chooseImage API 来实现图片选择。这个API允许用户从相册或相机中选择图片，并返回选中的图片临时文件路径。

tt.chooseImage({
  count: 1, // 最多可以选择的图片张数
  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认两者都有
  sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认两者都有
  success: function (res) {
    var tempFilePaths = res.tempFilePaths; // 返回选定照片的本地文件路径列表
    // 在这里可以进行预览或上传操作
  }
})

2、图片预览功能

一旦用户选择了图片，我们可以使用小程序的 tt.previewImage API 来实现图片预览功能。这个API可以预览图片或视频文件，支持手势缩放操作。

tt.previewImage({
  current: '', // 当前显示图片的链接，不填则默认为 urls 的第一张
  urls: tempFilePaths, // 需要预览的图片链接列表
  showmenu: true, // 是否显示长按菜单, 菜单支持保存图片至本地相册
})

注意事项

权限获取: 确保在使用 tt.chooseImage 前已经获得了用户的授权，否则可能导致API调用失败。
临时文件路径: tt.chooseImage 返回的是临时文件路径，需要及时处理或上传到服务器，否则在用户关闭小程序后路径可能失效。
图片大小的限制: 安卓手机选择的图片总体积不能超过180M。
图片预览需要携带referer：因为自身项目安全因素，需要在图片预览时携带referer，可以在全局referrerPolicy中的previewImage进行设置。
对于有原图上传要求的：安卓手机拍照获取的图片，默认为压缩图，不支持原图。