Ionic App浏览器端图片上传正常，移动端安装后无法上传求助

问题现象 #

开发的Ionic作业App，在浏览器通过ionic serve运行时图片可正常上传至Firebase存储，但安装到手机后，选择图片后一直加载，无法完成上传操作。

相关代码 #

获取图片函数 #

async UploadImage(){
    const image= await Camera.getPhoto({
      quality: 90,
      allowEditing: false,
      resultType: CameraResultType.Base64,
      source: CameraSource.Photos,
    });

    console.log(image);

    if(image){
      const loading= await this.loadingController.create();
      await loading.present();

      let result= await this.formUpload.uploadImage(image);
      loading.dismiss();

      console.log(result[1])

      if(result[0]==false){
        const toaster= await this.toastController.create({
          position: 'bottom',
          message: "Image not uploaded",
          color: 'danger',
          duration: 3000,
        });
        toaster.present();
      }else{
        this.images.push(result[1])
      }
    }
  }

上传图片函数 #

async uploadImage(cameraFile: Photo){
        let now=new Date()
        const user=this.auth.currentUser;
        const path= `uploads/${user.uid}/formImage${now}.png`;
        const storageref= ref(this.fireStorage, path);

        try {
            await uploadString(storageref, cameraFile.base64String, 'base64');
            let imageUrl: string;
            imageUrl =await getDownloadURL (storageref);
            console.log(imageUrl)
            return [true, imageUrl];
        } catch (error) {
            return error
        }
    }

排查与解决步骤 #

1. 先抓真机错误日志 #

用Chrome调试真机：打开chrome://inspect/#devices，连接手机后查看控制台的错误信息，这是定位问题最直接的方式——当前代码没有在catch里打印具体错误，真机上的异常可能被隐藏了。

2. 检查权限配置 #

真机访问相册需要明确权限，未配置会导致无法正常获取图片：

• Android：在AndroidManifest.xml添加权限

<uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
<!-- Android 12及以下额外添加： -->
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

• iOS：在Info.plist添加权限描述

<key>NSPhotoLibraryUsageDescription</key>
<string>需要访问您的相册以上传图片</string>

• Capacitor配置：在capacitor.config.ts里声明Camera权限

plugins: {
  Camera: {
    permissions: {
      photos: 'read',
    },
  },
}

3. 替换Base64为Blob格式上传 #

Base64字符串体积大，真机易出现内存溢出或传输超时问题，改用Blob格式更稳定：

修改获取图片函数

async UploadImage(){
    const image= await Camera.getPhoto({
      quality: 90,
      allowEditing: false,
      resultType: CameraResultType.Uri, // 改为Uri类型
      source: CameraSource.Photos,
    });

    console.log(image);

    if(image){
      const loading= await this.loadingController.create();
      await loading.present();

      // 将Uri转为Blob
      const response = await fetch(image.webPath!);
      const blob = await response.blob();

      let result= await this.formUpload.uploadImage(blob);
      loading.dismiss();

      console.log(result[1])

      if(result[0]==false){
        const toaster= await this.toastController.create({
          position: 'bottom',
          message: "Image not uploaded",
          color: 'danger',
          duration: 3000,
        });
        toaster.present();
      }else{
        this.images.push(result[1])
      }
    }
  }

修改上传函数

async uploadImage(imageBlob: Blob){
        const now = new Date()
        const user = this.auth.currentUser;
        // 用getTime()生成文件名，避免特殊字符导致路径错误
        const path= `uploads/${user.uid}/formImage${now.getTime()}.png`;
        const storageref= ref(this.fireStorage, path);

        try {
            await uploadBytes(storageref, imageBlob); // 改用uploadBytes传Blob
            const imageUrl = await getDownloadURL(storageref);
            console.log(imageUrl)
            return [true, imageUrl];
        } catch (error) {
            console.error('上传失败:', error); // 打印错误便于排查
            return [false, error]; // 统一返回格式，避免后续判断异常
        }
    }

4. 检查Firebase存储规则 #

确保规则允许已认证用户上传，示例规则：

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /uploads/{userId}/{allPaths=**} {
      allow write: if request.auth != null && request.auth.uid == userId;
      allow read: if request.auth != null;
    }
  }
}

若规则过于严格，真机上传请求会被Firebase拦截，导致卡住。

5. 验证用户认证与网络 #

• 确认真机上用户已成功登录，this.auth.currentUser不为空；
• 测试真机网络稳定性，确保能正常访问Firebase服务。

内容的提问来源于stack exchange，提问作者Ajecha Steve