uniapp 如何唤起相机或选择相册

在uniapp中如何实现调用系统相机拍照或从相册选择图片的功能？需要兼容Android和iOS平台，最好能提供完整的代码示例和权限配置说明。另外，选择图片后如何获取到文件的临时路径？

2 回复

在uniapp中，使用uni.chooseImage方法即可唤起相机或选择相册。示例代码：

uni.chooseImage({
  count: 1,
  sourceType: ['camera', 'album'],
  success: (res) => {
    console.log(res.tempFilePaths)
  }
})

其中sourceType参数控制来源：camera调用相机，album选择相册。


在 UniApp 中，您可以使用 uni.chooseImage API 来唤起相机或选择相册。这个 API 提供了统一的接口，支持从相机拍照或从相册选择图片。

基本使用方法：

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

参数说明：

  • count：最多可以选择的图片张数，默认 9
  • sizeType：选择图片的尺寸，可选 original（原图）或 compressed（压缩图）
  • sourceType：选择图片的来源
    • album：从相册选图
    • camera：使用相机

单独调用相机或相册：

// 只调用相机
uni.chooseImage({
  sourceType: ['camera'],
  success: (res) => {
    console.log('拍摄的图片：', res.tempFilePaths);
  }
});

// 只调用相册
uni.chooseImage({
  sourceType: ['album'],
  success: (res) => {
    console.log('选择的图片：', res.tempFilePaths);
  }
});

注意事项：

  1. 在 H5 端，部分浏览器可能不支持直接调用相机
  2. 在 App 端使用前，需要在 manifest.json 中配置相机和相册权限
  3. 返回的临时路径在应用本次启动期间可以正常使用，如需持久保存需要调用 uni.saveFile

这个 API 兼容微信小程序语法，在 UniApp 中各端都能很好地支持。

回到顶部