如何使用javascript从firebase存储中显示图像?

时间:2017-04-17 11:10:59

标签: javascript firebase firebase-storage

我尝试将图片上传到firebase存储并从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) { });

3 个答案:

答案 0 :(得分:1)

因此,看到您的错误消息,想法是todo

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

或者有一个等待文件上传的处理程序

答案 1 :(得分:0)

您可能想尝试这样的事情......

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 retrieveImage(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来执行操作。

发生错误时,它也会登录到控制台。

答案 2 :(得分:0)

var storageRef = firebase.storage().ref('profilePicturesOfAbmin/original/')

storageRef.listAll().then(res => {
    //for folders
    res.perfixes.forEach(folder => {
        console.log(folder);
    });
    // for files NAME and URL
    res.items.forEach(item => {
        // console.log( item.name ); 
        item.getDownloadURL().then(function (url) {
            console.log(url);
        });
    });
})