Firebase 3 + Ionic 2 + cordova-plugin-camera - 上传文件答案

【问题标题】：Firebase 3 + Ionic 2 + cordova-plugin-camera - Upload fileFirebase 3 + Ionic 2 + cordova-plugin-camera - 上传文件
【发布时间】：2016-10-06 20:03:02
【问题描述】：

我正在尝试使用 cordova-plugin-camera 将照片上传到 firebase 存储，但没有成功：

这是我的代码：

let options:any = {
    quality : 100,
    destinationType : Camera.DestinationType.DATA_URL,
    sourceType : Camera.PictureSourceType.CAMERA,
    allowEdit : false,
    encodingType: Camera.EncodingType.JPEG,
    mediaType: Camera.MediaType.PICTURE,
    targetWidth: 1920,
    targetHeight: 1920,
    saveToPhotoAlbum: true,
    cameraDirection: Camera.Direction.FRONT
};

Camera.getPicture(this.options).then( (imageData) => {

                let blob: any = new Blob( [imageData], { type: "image/jpeg" } );
                blob.name = 'image.jpg';

                let storageRef: any = firebase.storage().ref();
                let path: string = 'images/' + this.user.uid + '/' + Math.random().toString(36).substr(2, 9) + '.jpg';

                console.log(path);

                let uploadTask: any = storageRef.child(path).put(blob);

                uploadTask.on('state_changed', function(snapshot) {
                    console.log(snapshot);
                }, function(error) {
                    this.showAlert(error);
                }, function() {
                    var downloadURL = uploadTask.snapshot.downloadURL;
                    console.log(downloadURL);

                    console.log(this.user);

                    this.user.set({photo: downloadURL});
                });

            }, (err) => {
                this.showAlert(err);
            });

我不知道为什么，但似乎它正在上传，当我检查文件时是空的。

有什么帮助吗？

谢谢。

【问题讨论】：

标签： typescript angular firebase ionic2

【解决方案1】：

问题出在这部分

let blob: any = new Blob( [imageData], { type: "image/jpeg" } );

您需要将 imageData 从 base64 转换为 Blob。我建议按照此链接https://stackoverflow.com/a/16245768/3227392 使用atob 函数来生成Blob。对于完全相同的用例，这对我有用。

请注意，DATA_URL 占用大量内存，因此对于较大的图片可能会出现问题。

【讨论】：