无法将捕获的图像上传到Firebase存储

Question

我正在尝试使用Ionic 2编写一个小应用程序，允许我通过相机捕获图像并将所有捕获的图像上传到Firebase存储，并将捕获的图像URL存储到Firebase数据库中。

我做了这些教程，但它不起作用，没有图像上传到Firebase存储：

链接

http://www.offlineprogrammer.com/upload-images-firebase-storage-using-ionic-framework/ https://www.youtube.com/watch?v=6yGrLWq-oIo

这些是我的代码，您可能想查看是否有错误：

app.component.ts

...
import firebase from 'firebase';
...
constructor(...) {

platform.ready().then(() => {
  // Okay, so the platform is ready and our plugins are available.
  // Here you can do any higher level native things you might need.
  statusBar.styleDefault();
  splashScreen.hide();
});

firebase.initializeApp({
  apiKey: "XXXXXXXXXXXX",
        authDomain: "XXXXXXXXXXXXX",
        databaseURL: "XXXXXXXXXXX",
        projectId: "XXXXXXXXX",
        storageBucket: "XXXXXXXXXX",
        messagingSenderId: "XXXXXXXXXX"
  });

}

home.html

<ion-content class="footer">
  <ion-item>
  <img class="img-responsive" src="{{ myPhotoURL }}" />
  </ion-item>
</ion-content>

home.ts

export class HomePage{
  public myPhotosRef: any;
  public myPhoto: any;
  public myPhotoURL: any;

  constructor(...){
    this.myPhotosRef = firebase.storage().ref('/Photos/');
  }

  takePicture(){
    const options: CameraOptions = {
      quality: 80,
      destinationType: this.camera.DestinationType.DATA_URL,
      sourceType: this.camera.PictureSourceType.CAMERA,
      allowEdit: true,
      encodingType: this.camera.EncodingType.JPEG,
      saveToPhotoAlbum: false
    }
    this.camera.getPicture(options).then((imageData) => {
      this.myPhoto = imageData;
      this.uploadPhoto();
    });
  }

  private uploadPhoto(): void {
    this.myPhotosRef.child(this.generateUUID()).child('myPhoto.png')
      .put(this.myPhoto, 'base64', { contentType: 'image/png' })
      .then((savedPicture) => {
        this.myPhotoURL = savedPicture.downloadURL;
    });
  }

  private generateUUID(): any {
    let d = new Date().getTime();
    let uuid = 'xxxxxxxx-xxxx-4xxx-yxxx'.replace(/[xy]/g, function (c) {
      let r = (d + Math.random() * 16) % 16 | 0;
      d = Math.floor(d / 16);
      return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
    });
    return uuid;
  }
}

- Ali H

Answer 1

您需要按照下面所示将JPEG替换为PNG，因此您的contentType: 'image/png'。

 encodingType: this.camera.EncodingType.PNG,

同时将其设置为true

saveToPhotoAlbum: true

- Sampath

Answer 2

我通过做这些更改解决了问题

takePicture(){
const options: CameraOptions = {
  quality : 75,
        destinationType : this.camera.DestinationType.DATA_URL,
        sourceType : this.camera.PictureSourceType.CAMERA,
        allowEdit : true,
        encodingType: this.camera.EncodingType.JPEG,
        saveToPhotoAlbum: true
}
this.camera.getPicture(options).then((imageData) => {
        this.myPhoto = imageData;
  this.uploadPhoto();
    });
}

private uploadPhoto(): void {
this.myPhotosRef.child(this.generateUUID()).child('myPhoto.JPEG')
  .putString(this.myPhoto, 'base64', { contentType: 'image/JPEG' })
  .then((savedPicture) => {
    this.myPhotoURL = savedPicture.downloadURL;
  });
}

- Ali H