uniapp如何读取相册中的图片

在uniapp中如何读取用户相册中的图片？我需要实现一个功能让用户选择手机相册里的图片并上传，但不知道具体该怎么操作。求教各位，uniapp提供了哪些API可以实现这个功能？是否需要特殊的权限配置？最好能提供一个完整的代码示例，谢谢！

2 回复

在uni-app中读取相册图片，可以使用uni.chooseImage API。示例代码：

uni.chooseImage({
  count: 1, // 最多选择图片数量
  sourceType: ['album'], // 从相册选择
  success: (res) => {
    const tempFilePaths = res.tempFilePaths // 返回选定图片的本地路径
    console.log('图片路径:', tempFilePaths[0])
    // 这里可以上传或显示图片
  },
  fail: (err) => {
    console.log('选择失败', err)
  }
})

注意事项：

  1. 需要配置权限（manifest.json中配置相册权限）
  2. H5端可能受浏览器限制
  3. 返回的是临时路径，如需持久化需要上传到服务器

如果需要更复杂的操作（如多选、压缩等），可以调整count和sizeType参数。


在 UniApp 中，读取相册中的图片主要通过调用 uni.chooseImage API 实现。该接口允许用户从相册选择图片或拍照，并返回图片的本地临时路径。

实现步骤：

  1. 调用 uni.chooseImage 方法：配置参数（如选择数量、来源等）。
  2. 处理返回结果：获取图片的临时路径，可用于预览或上传。

示例代码：

// 在方法中调用选择图片
chooseImage() {
  uni.chooseImage({
    count: 1, // 最多选择图片数量，默认9
    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图
    sourceType: ['album'], // 仅从相册选择
    success: (res) => {
      // 成功回调，res.tempFilePaths 为图片临时路径数组
      const tempFilePaths = res.tempFilePaths;
      console.log('选择的图片路径:', tempFilePaths);
      
      // 示例：预览图片
      uni.previewImage({
        urls: tempFilePaths,
        current: 0
      });
    },
    fail: (err) => {
      console.error('选择图片失败:', err);
    }
  });
}

参数说明：

  • count：最多选择的图片数量。
  • sizeType：图片质量，可选 'original'（原图）或 'compressed'（压缩图）。
  • sourceType：选择来源，['album'] 为相册，['camera'] 为相机，或同时指定。

注意事项：

  • 临时路径仅在本次应用运行期间有效，如需持久化需上传至服务器。
  • H5 端可能受浏览器权限限制，需确保环境支持。

通过以上方法即可在 UniApp 中实现读取相册图片功能。

回到顶部