web-dev-qa-db-ja.com

画像URIを使用してFirebaseStorageに写真をアップロードする

現在、ApacheCordovaアプリのFirebaseアプリのストレージに写真をアップロードしようとしています。現在、次のコードで写真のURIを取得しています。

function getPhotoFromAlbum() {

    navigator.camera.getPicture(onPhotoURISuccess, onFail, {
        quality: 50,
        sourceType: navigator.camera.PictureSourceType.SAVEDPHOTOALBUM,
        destinationType: navigator.camera.DestinationType.FILE_URI
    });
}

function onPhotoURISuccess(imageURI) {
    var image = document.getElementById('image');
    image.style.display = 'block';
    image.src = imageURI;

    getFileEntry(imageURI);

}

次に、次の関数を使用して、画像をファイルに変換し、Firebaseストレージにプッシュしようとしています。

function getFileEntry(imgUri) {
    window.resolveLocalFileSystemURL(imgUri, function success(fileEntry) {

        console.log("got file: " + fileEntry.fullPath);
        var filename = "test.jpg";
        var storageRef = firebase.storage().ref('/images/' + filename);
        var uploadTask = storageRef.put(fileEntry);

    }, function () {
        // If don't get the FileEntry (which may happen when testing
        // on some emulators), copy to a new FileEntry.
        createNewFileEntry(imgUri);
    });
}

ファイルとカメラのcordovaプラグインの両方をインストールしていますが、これを実行しようとするとエラーが発生するのは

Error in Success callbackId: File1733312835 : [object Object]

これはcordova.jsからの単なるエラーメッセージです

また、ファイル入力を追加し、ユーザーが追加したファイルをFirebaseストレージに正常にアップロードすることでエミュレーターを介してテストしたため、Firebaseストレージが正しくセットアップされていることもわかっています。

URIを介して画像をファイルに変換し、アップロードするこの方法を使用して、ファイルをFirebaseストレージにアップロードすることはできますか？もしそうなら、そうするための正しい方法は何ですか/私がそれをしている方法の何が問題になっていますか？

javascriptcordovafirebasephonegap-pluginsfirebase-storage
11
Roger99

データURLを使用して画像をアップロードすることができました。以下は私のコードです：

var filename = "test.jpg";
                    var storageRef = firebase.storage().ref('/images/' + filename);

                    var message = 'data:image/jpg;base64,' + imageUri;
                    storageRef.putString(message, 'data_url').then(function (snapshot) {
                        console.log('Uploaded a data_url string!');
                    });
1
Roger99

URIを介して画像をファイルに変換し、アップロードするこの方法を使用して、ファイルをFirebaseストレージにアップロードすることはできますか？もしそうなら、そうするための正しい方法は何ですか/私がそれをしている方法の何が問題になっていますか？

はい、URIを介してFirebaseにファイルをアップロードすることは可能です。ただし、正しい方法に従う必要があります。

1。ファイルfirebase操作が完了した後、データをreadingに保存する必要があります。これにはFileReader.onloadendを使用できます。

2。data_urlを使用すると、firebaseに保存できます。

わかりやすくするためのスニペットは次のとおりです。

function getFileEntry(imgUri) {
    window.resolveLocalFileSystemURL(imgUri, function onSuccess(fileEntry) {
            fileEntry.file(function(file) { 
                var reader = new FileReader();
                reader.onloadend = function() {
                    filename = "test.jpg";
                var storageRef = firebase.storage().ref('/images/' + filename);
             var data = 'data:image/jpg;base64,' + imgUri;
                storageRef.putString(data, 'data_url').then(function (snapshot) {
                    console.log('Image is uploaded by base64 format...');
                });
                };
                reader.readAsArrayBuffer(file);
            });
        },
        function onError(err) {
             console.log(err);
             createNewFileEntry(imgUri);
        });
}
0
NullPointer