无法将捕获的图片上传到 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

这些我的代码你可能想看看我是否犯了一些错误

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

首页.html

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

首页

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

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