uniapp 如何读取相册图片

在uniapp中如何读取相册图片？我需要实现一个功能，让用户可以从手机相册选择图片并上传，但不知道具体该怎么操作。能否提供一个完整的代码示例，包括权限请求和图片选择的实现方法？另外，这个方法在iOS和Android上都兼容吗？

2 回复

在uniapp中，使用uni.chooseImage方法读取相册图片。示例代码：

uni.chooseImage({
  count: 1,
  sourceType: ['album'],
  success: (res) => {
    const tempFilePath = res.tempFilePaths[0]
    console.log('图片路径:', tempFilePath)
  }
})

参数说明：

  • count：选择数量
  • sourceType：来源类型，album为相册
  • success：成功回调，返回临时文件路径

在 UniApp 中，读取相册图片主要通过调用 uni.chooseImage API 实现。以下是详细步骤和代码示例：

实现步骤：

  1. 调用 uni.chooseImage 方法：选择图片并返回临时文件路径。
  2. 处理返回结果：获取图片的临时路径，可用于预览或上传。
  3. 权限配置：在部分平台（如 App）需配置相册访问权限。

代码示例：

// 在 Vue 方法中调用
methods: {
  chooseImage() {
    uni.chooseImage({
      count: 1, // 可选图片数量，默认 9
      sizeType: ['original', 'compressed'], // 可指定原图或压缩图
      sourceType: ['album'], // 来源为相册（还可选 camera）
      success: (res) => {
        // 成功回调，res.tempFilePaths 为临时路径数组
        const tempFilePath = res.tempFilePaths[0];
        console.log('图片临时路径:', tempFilePath);
        // 可在此进行图片预览或上传操作
        uni.previewImage({
          urls: [tempFilePath] // 预览图片
        });
      },
      fail: (err) => {
        console.error('选择图片失败:', err);
      }
    });
  }
}

注意事项：

  • 临时路径有效性：返回的路径仅在本次应用运行期间有效，如需持久化需上传至服务器。
  • 平台差异：H5 平台可能受浏览器限制；App 端需在 manifest.json 中配置相册权限。
  • 用户授权：首次调用时会请求用户授权，如果用户拒绝需引导手动开启。

扩展功能：

  • 结合 uni.uploadFile 实现图片上传。
  • 使用 uni.compressImage 对图片进行压缩处理。

通过以上方法即可在 UniApp 中实现相册图片的读取和基础操作。

回到顶部