Ionic 7（角度），电容器，将图像保存到 Firebase 存储时出错

Question

在我的 Ionic 7 应用程序中，我尝试使用 Capacitor Camera 插件将图像保存到 Firebase 存储中。

从网络浏览器拍摄图片时效果很好。然而，在android手机上拍照时，调用Firebase方法“uploadString()”时会出现以下错误

FirebaseError: Firebase Storage: An unknown error occurred, please check the error payload for server response. (storage/unknown

来自 CapacitorHttp.request 的错误

{
    "status": 400,
    "headers": {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Expose-Headers": "Content-Length, Content-Type, Date, Server, Transfer-Encoding, X-GUploader-UploadID, X-Google-Trace",
        "Alt-Svc": "h3=\":443\"; ma=2592000,h3-29=\":443\"; ma=2592000",
        "Content-Length": "45",
        "Content-Type": "text/plain; charset=utf-8",
        "Date": "Wed, 12 Jul 2023 09:52:51 GMT",
        "Server": "UploadServer",
        "X-Android-Received-Millis": "1689155570831",
        "X-Android-Response-Source": "NETWORK 400",
        "X-Android-Selected-Protocol": "http/1.1",
        "X-Android-Sent-Millis": "1689155570679",
        "X-GUploader-UploadID": "ADPycdu8yyYibwUojSi4OVADDqYD9U9dIFkAmVMgmFRqZqorsLdahxsIxsA4lGm9Q0XThZW5UtTZCBM94WQKC_d7qfdoarGfen3_"
    },
    "url": "https://firebasestorage.googleapis.com/v0/b/treatmvp.appspot.com/o?name=upload_1689155570831.jpeg",
    "data": "Multipart body does not contain 2 or 3 parts.",
    "error": true
}

因此出现“多部分主体不包含 2 或 3 部分”的原因和来自 Android 的问题。

代码如下

  public async addNewToGallery(photoPathId: string) {
    // Take a photo
    const image: Photo = await Camera.getPhoto({
      quality: 90,
      allowEditing: false,
      resultType: CameraResultType.DataUrl,
    });
    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 {
      // this Firestore method is not working
      await uploadString(storageRef, cameraFile.dataUrl!, 'data_url')
      const imageUrl = await getDownloadURL(storageRef);
      this.updateUserPhotos(imageUrl, photoPathId, path);
      return true;
    } catch (e) {
      console.log('error from upload?', e);
      return null;
    }
  }

任何解决这个问题的想法都会非常有帮助

Answer 1

我的应用程序中有这个问题，我只设置了 电容器Http：{ 启用：假， },

并且工作正常。