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

【问题标题】：Can't upload captured images to firebase storage无法将捕获的图像上传到 Firebase 存储
【发布时间】：2018-01-13 11:09:10
【问题描述】：

我正在尝试使用 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;
  }
}

【问题讨论】：

标签： angular firebase ionic2

【解决方案1】：

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

 encodingType: this.camera.EncodingType.PNG,

并将其设置为true

saveToPhotoAlbum: true

【讨论】：

【解决方案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;
  });
}

【讨论】：