angular - 无法将捕获的图像上传到 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;
  }
}

Answer 1

您必须将 JPEG 替换为 PNG，如下所示，因此您的 contentType: 'image/png'。

 encodingType: this.camera.EncodingType.PNG,

并将其设置为 true

saveToPhotoAlbum: true