Capacitor Camera在Android设备无法加载预览图片求助

问题分析 #

Android设备无法加载预览图片但Web端正常，核心原因是Android相机返回的content://类型Uri无法被普通FileReader（你的readAsBase64方法大概率基于此）直接读取——Android对Content Uri有严格权限控制，而Web端file://Uri无此限制。

解决方案1：直接获取Base64格式图片（最简方案） #

修改相机配置，直接请求Base64格式的图片数据，跳过Uri转换步骤，Android和Web端可直接兼容：

import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';

// ...

const capturedPhoto = await Camera.getPhoto({
    resultType: CameraResultType.Base64, // 改为Base64类型
    source: CameraSource.Camera,
    quality: 80 // 建议适当降低质量，避免Base64数据过大
});

// 拼接完整的data URI格式
const base64Data = `data:image/jpeg;base64,${capturedPhoto.base64String}`;

this.photos['image'][this.myindex] = base64Data;
this.myindex++;
this.photos.reverse();

解决方案2：用Capacitor Filesystem处理Content Uri（适合必须用Uri的场景） #

如果业务需要保留Uri获取逻辑，使用Capacitor官方Filesystem插件读取Content Uri内容，它会自动处理Android权限问题：

1. 安装Filesystem插件：

npm install @capacitor/filesystem
npx cap sync

2. 修改代码：

import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
import { Filesystem, Encoding } from '@capacitor/filesystem';

// ...

const capturedPhoto = await Camera.getPhoto({
    resultType: CameraResultType.Uri,
    source: CameraSource.Camera,
    quality: 100
});

// 用Filesystem读取Uri对应的文件内容为Base64
const fileData = await Filesystem.readFile({
    path: capturedPhoto.webPath!, // Android下webPath即为content:// Uri
    encoding: Encoding.Base64
});

const base64Data = `data:image/jpeg;base64,${fileData.data}`;

this.photos['image'][this.myindex] = base64Data;
this.myindex++;
this.photos.reverse();

额外检查项 #

• 确认AndroidManifest.xml中已配置必要权限（Capacitor通常自动添加，若未生效可手动检查）：

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

• 若使用Base64方案，注意大图片的性能问题，建议根据实际需求调整quality参数。

内容的提问来源于stack exchange，提问作者Prathyush Lal