簡體   English   中英

使用圖像 URI 將照片上傳到 Firebase 存儲

[英]Upload a photo to Firebase Storage with Image URI

我目前正在嘗試將照片上傳到我的 Apache Cordova 應用程序中的 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 存儲? 如果是這樣,這樣做的正確方法是什么/我這樣做的方式有什么問題?

我能夠通過使用數據 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!');
});

是否可以使用這種通過 URI 將圖像轉換為文件然后上傳的方法將文件上傳到 Firebase 存儲? 如果是這樣,這樣做的正確方法是什么/我這樣做的方式有什么問題?

是的,可以通過其 URI 在 firebase 上上傳文件。 但是,您必須遵循正確的方法。

1.文件reading操作完成后,您必須將數據存儲在firebase 您可以為此使用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);
        });
}

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM