如何通过 devapp 在 Ionic 4 的 firebase 存储上上传在 phone 拍摄的照片

Question

我正在尝试上传一张通过我的phone相机拍摄的照片（使用 Ionic 4 Native Camera Plugin 通过 DevApp ) 并将其上传到 Firebase Storage。现在我可以拍照了，但是当我上传照片时，控制台不会抛出任何错误，只是什么也不做。最后，照片没有上传到firebase存储。

这是我的代码：

.html:

<ion-button (click)="takePicture()"></ion-button>

.ts:

  takePicture(){
    const options: CameraOptions = {
      quality: 100,
      destinationType: this.camera.DestinationType.FILE_URI,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE
     }

     this.camera.getPicture(options).then((imageData) => {
       var storage = firebase.storage().ref();
       var photoRef = storage.child('Manager Images'); 
       console.log(photoRef); <-- This reference is correct

       let base64Image = 'data:image/jpeg;base64,' + imageData;
       console.log(base64Image); <-- Returns "data:image/jpeg;base64,file:///storage/emulated/0/Android/data/io.ionic.devapp/cache/1577622281686.jpg"

       // Base64 formatted string
       var message = imageData;
       photoRef.putString(message , 'base64', { contentType: 'image/jpg' }).then((savedPicture) => {
       console.log(savedPicture.downloadURL);
});


   }, (err) => {
    // Handle error
   });
  }

我的 .putString 方法有问题吗？我参考了 https://firebase.google.com/docs/storage/web/upload-files 的指导方针，但我仍然无法让它发挥作用。请帮忙！

Answer 1

更改此行，它应该可以工作。

var message = base64Image;

imageData 不是 'base64'

或上传为文件，按原样使用文件。

var file = imageData
photoRef.put(file).then(snapshot => {
    console.log('Uploaded a blob or file!')
});

Answer 2

将目标类型更改为 this.camera.DestinationType.DATA_URL 以获取 base64，然后将其放入 firebase 存储。

  takePicture(){
    const options: CameraOptions = {
      quality: 100,
      destinationType: this.camera.DestinationType.DATA_URL,
    ...

PS。确定 let base64Image = 'data:image/jpeg;base64,' + imageData; 是否必要，或者 imageData 是否已经具有 base64 格式的编码类型。

如何通过 devapp 在 Ionic 4 的 firebase 存储上上传在 phone 拍摄的照片

How to upload photo taken on phone through devapp on firebase storage in Ionic 4

firebase

firebase-storage

angular

ionic4

ionic-devapp