Ionic Capacitor中CameraSource.Photos在Android无法打开图库问题排查

以下是针对你的代码在Android设备上无法打开图库的排查方向和解决方法：

1. 补全Android权限配置 #

Android系统需要明确的权限声明才能访问图库，需在AndroidManifest.xml中添加对应权限：

<!-- 适配Android 12及以下版本 -->
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<!-- 适配Android 13+版本的细分权限 -->
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />

同时建议在代码中主动检查并请求权限，避免权限未授予导致的失败：

import { PermissionState, Permissions } from '@capacitor/core';

async checkPermissions() {
  const { photos } = await Permissions.check({ name: 'photos' });
  if (photos !== PermissionState.Granted) {
    const result = await Permissions.request({ name: 'photos' });
    if (result.photos !== PermissionState.Granted) {
      this.presentErrorToast('需要授予读取图库的权限才能继续');
      return false;
    }
  }
  return true;
}

async openCamera(){
  if (this.imagesend.length <= 1) {
    const hasPermission = await this.checkPermissions();
    if (!hasPermission) return;
    
    // 原有的图库调用逻辑
    const image = await Camera.getPhoto({
        quality: 90,
        allowEditing: false,
        correctOrientation: true,
        resultType: CameraResultType.Base64, 
        source: CameraSource.Photos
    });
    this.imagesend.push(image.base64String);
    this.base64Image.push("data:image/jpeg;base64," + image.base64String);
  } else {
      let msg = "最多只能上传两张图片。";
      this.presentErrorToast(msg); 
  }
}

2. 检查插件版本兼容性 #

确保@capacitor/camera和@capacitor/core版本匹配，建议升级到最新稳定版：

npm update @capacitor/core @capacitor/camera

升级后重新同步Android项目：

npx cap sync android

3. 添加错误捕获排查问题 #

当前代码没有异常处理逻辑，添加try-catch可以捕获具体错误信息，帮助定位问题：

async openCamera(){
  if (this.imagesend.length <= 1) {
    try {
      const hasPermission = await this.checkPermissions();
      if (!hasPermission) return;
      
      const image = await Camera.getPhoto({
          quality: 90,
          allowEditing: false,
          correctOrientation: true,
          resultType: CameraResultType.Base64, 
          source: CameraSource.Photos
      });
      this.imagesend.push(image.base64String);
      this.base64Image.push("data:image/jpeg;base64," + image.base64String);
    } catch (error) {
      console.error('打开图库失败:', error);
      this.presentErrorToast('打开图库失败，请重试');
    }
  } else {
      let msg = "最多只能上传两张图片。";
      this.presentErrorToast(msg); 
  }
}

通过Android Studio的Logcat或Chrome远程调试可以查看具体错误日志，比如权限拒绝、系统限制等。

4. 验证Capacitor配置 #

检查capacitor.config.ts中的相机插件配置，确保启用图库访问：

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.your.app',
  appName: 'YourApp',
  webDir: 'www',
  bundledWebRuntime: false,
  plugins: {
    Camera: {
      allowPhotos: true,
    },
  },
};

export default config;

修改配置后执行npx cap sync android同步到Android项目。

内容的提问来源于stack exchange，提问作者bhupesh.hardel