如何使用JavaScript顯示Firebase存儲的圖像？

我試圖將圖片上傳到firebase存儲並從firebase存儲檢索圖像。但是，在「檢索」的情況下不工作：如何使用JavaScript顯示Firebase存儲的圖像？

// image upload 
var storageRef = firebase.storage().ref('profilePicturesOfAbmin/original/'+file.name); 
storageRef.put(file); 
function error(err) { 
    console.log("error",err); 
} 

// retrieve image from firebase storage 
var storageRef = firebase.storage().ref(); 
var spaceRef = storageRef.child('profilePicturesOfAbmin/original/'+file.name); 
storageRef.child('profilePicturesOfAbmin/original/'+file.name).getDownloadURL().then(function(url) { 
    console.log("bsbdsbsdbd"); 
    var test = url; 
    alert("hfdghjghj",url); 
}).catch(function(error) { });

來源

2017-04-17 ASWATHY

你能看到它上傳到控制檯嗎？ – dpix

是的，它顯示在控制檯@ dpix – ASWATHY

嘗試打印出任何錯誤。如果您運行此代碼，則.put（）方法將執行異步。因此，當您嘗試下載文件時，可能無法使用 –

因此，與看到您的錯誤信息的想法是待辦事項

StorageRef.put(file, function(){ 
    // Now do the download 
})

或者有等待，直到文件上傳處理程序

來源

2017-04-19 11:01:26

謝謝@Christopher，我創建了一個等待文件上傳的處理程序並獲得下載網址 – ASWATHY

你可能想嘗試像這樣...

var storageRef = firebase.storage().ref(filePath); 

function uploadImage(event){ 
    var file = event.target.files[0]; 

    return storageRef.put(file).then(function(snapshot) { 
    // put the file now do something... 
    var fullPath = snapshot.metadata.fullPath; 
    console.log(fullPath); 
    }).catch(function(error){ 
    console.log("error uploading "+error); 
    }); 
} 

function retieveImage(imageUri, imgElement){ 
    if (imageUri.startsWith('gs://')) { 
    storageRef.refFromURL(imageUri).getMetadata().then(function(metadata) { 
     imgElement.src = metadata.downloadURLs[0]; 
     console.log("URL is "+metadata.downloadURLs[0]); 
    }).catch(function(error){ 
     console.log("error downloading "+error); 
    }); 
    } 
}

這將使用Promise's來執行一次操作該文件已成功上傳。

當發生錯誤時，它也會登錄到控制檯。

來源

2017-04-19 12:06:35 dawogfather

如何使用JavaScript顯示Firebase存儲的圖像？

回答

相關問題