如何根據Firebase數據的參考信息從Firebase存儲中下載圖像文件

Question

我一直在爲這個問題苦苦掙扎數日。 我試圖在我的網絡應用中使用Firebase存儲，「上傳」部分工作正常，而且我喜歡它，但「下載」部分讓我發瘋。 這裏是我的代碼：

首先我有我的火力地堡（數據）參考：

var refspaedtServ = new Firebase(FBURLSPA + $routeParams.id); 
$scope.spaedServ = $firebaseObject(refspaedtServ); 

我發現了一個ID中我的紀錄。 其次，我讓我的對象領域叫「照片」，是我想下載或顯示

var lafoto = ''; 
refspaedtServ.on("value", function(rootSnapshot) { 
    lafoto = rootSnapshot.val().foto; 
    console.log("Inside image ", lafoto) 
}); 

所以在這裏我得到的照片的名字照片的名稱。 由於這是異步通信，我是無法得到的價值，所以我插入一個超時功能：

setTimeout(function(){ 
    console.log("outside ", lafoto); 
    $scope.lafoto = lafoto 
}, 1000); 

所以這裏的時刻設定功能裏面，是「lafoto」值確定。 然後，我讓我的火力地堡貯存桶的refrence：

var storageRef = firebase.storage().ref(); 
var starsRef = storageRef.child('fotos' + lafoto); 

這纔是我的「問題」，當我試圖下載形象，「lafoto」的價值消失了，URL可以是構建有是沒有約束力的到我的網頁圖像容器，在這裏我想顯示照片

starsRef.getDownloadURL().then(function(url) { 
    console.log("la url ", url) ; 
    $scope.url = url; 
}).catch(function(error) { 
    switch (error.code) { 
    case 'storage/object_not_found'; 
}); 

我已經做了一個試驗，留下的setTimeout（函數）內存儲的參考和starsRef.getDownloadURL和它的作品（部分），我url正確創建，但它沒有綁定到我的網頁。 如果我查看console.log，我的網址是好的，同樣如果我點擊它，讓我看看照片。

有什麼建議嗎？

最好的問候，

維克多

Answer 1

好像你正在失去參考$scope這可能是因爲有你的異步調用控制器的外部（這很難不看你的整個代碼說）。

首先，而不是refspaedtServ.on()後面跟着一個setTimeout()你應該使用refspaedtServ.once()它返回一個承諾，並將你的邏輯的其餘部分在承諾內移動。那麼你應該直接在$scope內設置承諾。承諾可以在模板中使用，如this article所示。例如這樣的事情應該工作：

myModule.controller('HelloCtrl', function($scope) { 
    var refspaedtServ = new Firebase(FBURLSPA + $routeParams.id); 
    $scope.spaedServ = $firebaseObject(refspaedtServ); 
    $scope.url = refspaedtServ.once("value").then(function(rootSnapshot) { 
    var lafoto = rootSnapshot.val().foto; 
    console.log("Inside image ", lafoto) 
    var starsRef = firebase.storage().ref('fotos' + lafoto); 
    return starsRef.getDownloadURL().then(function(url) { 
     console.log("la url ", url) ; 
     return url; 
    }).catch(function(error) { 
     switch (error.code) { 
     case 'storage/object_not_found'; 
     } 
    }); 
    }); 
}) 

現在$scope.url分配這到底url直接返回（因爲承諾可以通過返回其他承諾通過管道輸送）和模板實際上支持的承諾的承諾。

與您的問題無關：我建議直接在數據庫中保存圖像的URL，而不僅僅是存儲URI。這個網址不應該改變，這樣每次你想顯示圖像時都會爲你節省額外的請求。例如，如果您將此網址保存在fotoUrl屬性中，您可以執行以下操作：

myModule.controller('HelloCtrl', function($scope) { 
    var refspaedtServ = new Firebase(FBURLSPA + $routeParams.id); 
    $scope.spaedServ = $firebaseObject(refspaedtServ); 
    $scope.url = refspaedtServ.once("value").then(function(snapshot) { 
    return snapshot.val().fotoUrl; 
    }); 
})