Ionic 7+Capacitor调用Firebase uploadString()上传图片Android端报错

错误原因 #

从返回的400错误和Multipart body does not contain 2 or 3 parts提示可确定：Android环境下，Firebase Storage处理Capacitor Camera返回的DataUrl格式时，底层Multipart请求构造出现异常。网页端正常是因为浏览器对DataUrl的解析逻辑与Android原生环境存在差异。

可行解决思路 #

思路1：改用Blob格式上传 #

绕过DataUrl的格式问题，将其转换为Blob后使用uploadBytes方法上传：

async uploadImage(cameraFile: Photo, photoPathId: string) {
  const path = `uploads/${photoPathId}/${new Date().getTime()}.png`;
  const storageRef = ref(this.storage, path);

  try {
    // 将DataUrl转换为Blob对象
    const response = await fetch(cameraFile.dataUrl!);
    const blob = await response.blob();
    
    // 替换uploadString为uploadBytes
    await uploadBytes(storageRef, blob);
    const imageUrl = await getDownloadURL(storageRef);
    this.updateUserPhotos(imageUrl, photoPathId, path);
    return true;
  } catch (e) {
    console.log('error from upload?', e);
    return null;
  }
}

思路2：切换Capacitor Camera返回格式为Base64 #

将Camera的resultType改为Base64，直接上传纯Base64字符串：

public async addNewToGallery(photoPathId: string) {
  const image: Photo = await Camera.getPhoto({
    quality: 90,
    allowEditing: false,
    resultType: CameraResultType.Base64, // 修改返回格式
  });
  await this.uploadImage(image, photoPathId);
}

async uploadImage(cameraFile: Photo, photoPathId: string) {
  const path = `uploads/${photoPathId}/${new Date().getTime()}.png`;
  const storageRef = ref(this.storage, path);

  try {
    // 上传纯Base64字符串，指定格式为'base64'
    await uploadString(storageRef, cameraFile.base64String!, 'base64');
    const imageUrl = await getDownloadURL(storageRef);
    this.updateUserPhotos(imageUrl, photoPathId, path);
    return true;
  } catch (e) {
    console.log('error from upload?', e);
    return null;
  }
}

思路3：排查基础配置 #

• 确认Firebase Storage安全规则允许当前用户上传（测试阶段可临时设置为allow read, write: if true;，上线后再收紧权限）
• 检查Android项目的AndroidManifest.xml已添加网络权限：<uses-permission android:name="android.permission.INTERNET" />

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