angular - 如何将来自 Ionic 相机的图像上传到 firebase？

Question

我已经成功地使用 Ionic 相机 API 拍了一张照片:

  async pickImage(sourceType: CameraSource) {
    const image = await Camera.getPhoto({
      quality: 90,
      allowEditing: true,
      resultType: CameraResultType.Uri,
      source: sourceType,
    });
    console.log(image);
  }

这给了我这个:

我还发现可以使用 angular fire storage 上传，但我不知道如何将两者联系起来。我真的不明白它们之间的格式是什么，我应该向 Camera API 询问什么格式以及我应该向 AngularFireStorage API 提供什么格式。

我试过这个:

const filePath = 'name-your-file-path-here';
const ref = this.storage.ref(filePath);
const task = ref.put(image.webPath);
task
  .snapshotChanges()
  .pipe(finalize(() => console.log(ref.getDownloadURL())))
  .subscribe();

但是我得到这个错误:

ERROR Error: Uncaught (in promise): FirebaseStorageError: {"code_":"storage/invalid-argument","message_":"Firebase Storage: Invalid argument in `put` at index 0: Expected Blob or File.","serverResponse_":null,"name_":"FirebaseError"}

非常感谢您的灯 :)

Answer 1

“webpath”不是文件或 blob，您需要在调用 put 之前对其进行转换。 ionic网站上有如何转换的例子

https://ionicframework.com/docs/angular/your-first-app/3-saving-photos

private async readAsBase64(cameraPhoto: CameraPhoto) {
  // Fetch the photo, read as a blob, then convert to base64 format
  const response = await fetch(cameraPhoto.webPath!);
  const blob = await response.blob();

  return await this.convertBlobToBase64(blob) as string;  
}

convertBlobToBase64 = (blob: Blob) => new Promise((resolve, reject) => {
  const reader = new FileReader;
  reader.onerror = reject;
  reader.onload = () => {
      resolve(reader.result);
  };
  reader.readAsDataURL(blob);
});