無法將捕獲的圖像上傳到firebase存儲

Question

我試圖通過Ionic 2做小應用程序，允許我通過相機捕獲圖像並將所有捕獲的圖像上傳到firebase存儲並將捕獲的圖像URL存儲到firebase數據庫中。

我做這些教程，但它不工作，並上傳到火力存儲沒有圖像，

鏈接

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

這些我碼U可以想看看我是否犯了一些錯誤

個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

你必須如下所示與因此PNG取代JPEG你的contentType: 'image/png'。

encodingType: this.camera.EncodingType.PNG, 

，還可以設置這個作爲true

saveToPhotoAlbum: true

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; 
    }); 
}