Firebase 存储 getDownloadURL() 不返回工作 url答案

【问题标题】：Firebase storage getDownloadURL() doesn't return a working urlFirebase 存储 getDownloadURL() 不返回工作 url
【发布时间】：2016-11-01 16:26:55
【问题描述】：

我尝试使用getDownloadURL() 方法来检索存储在 Firebase 存储中的图像的 url。

奇怪的是它返回一个 url，它是一个对象，而不是图像

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓示例 URL↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ https://firebasestorage.googleapis.com/v0/b/example.appspot.com/o/images%2Fcat.png ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ ↑↑↑↑↑↑↑↑↑↑↑↑↑

我在网上做了一些研究，发现显示我的图像的正确 url 应该是这样的......

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓示例 URL↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ https://firebasestorage.googleapis.com/v0/b/example.appspot.com/o/images%2Fcat.png?alt=media&token=sometoken
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ ↑↑↑↑↑↑↑↑↑↑↑↑↑

但我不知道如何使用getDownloadURL() 获取网址...

这是我的代码...

var storage = firebase.storage();

$scope.getImgUrl = function(file) {
    storage.ref("images/" + file + ".png")
      .getDownloadURL()
      .then(function onSuccess(url) {
        return url;
      })
      .catch(function onError(err) {
        console.log("Error occured..." + err);
      })
  }

有什么想法吗？

【问题讨论】：

这些网址返回错误 404
不需要 ?alt=media&token=sometoken。
网址无效。 Not Found. Could not access bucket example.appspot.com
您是否得到了正确的回应。我仍然坚持这个

标签： javascript angularjs firebase firebase-storage

【解决方案1】：

所以从 Firebase 获取图片 url 的正确方法是：

 $scope.getImgUrl = function(file) {
        storage.child("images/" + file +".png").getDownloadURL().then(function(url) {
          return url;
        }).catch(function(error) {
          // Handle any errors here
        });
 }

请注意，您使用的是storage.child() 而不是storage.ref()

【讨论】：

我试过了，但还是没有运气......我想我会把它们放在数据库中，以便通过 angularfire 更轻松地访问......无论如何，谢谢！
它还在返回一个对象吗？
VM4235 CommonService.js:312 Uncaught TypeError: firebase.storage(...).child is not a function at Object.uploadImage (VM4235 CommonService.js:312) at updateSubCategory (SubCategoryController.js: 84) 在 HTMLButtonElement. (SubCategoryController.js:68) 在 HTMLButtonElement.dispatch (jquery.min.js:3) 在 HTMLButtonElement.r.handle (jquery.min.js:3) uploadImage @ VM4235 CommonService.js: 312 updateSubCategory@SubCategoryController.js:84（匿名）@SubCategoryController.js:68 调度@jquery.min.js:3 r.handle@jquery.min.js:3

【解决方案2】：

then() 回调中的返回值与您期望的不同。当您调用 getDownloadUrl() 时，它会返回一个承诺。如果您只是将该承诺绑定到范围，则可以在 HTML 中使用它：

$scope.getImgUrl = function(file) {
    return storage.ref("images/" + file + ".png").getDownloadURL();
}

【讨论】：

谢谢，我在 stackoverflow XD 上阅读了很多您的回答。但这一次我仍然无法弄清楚出了什么问题。我将使用数据库来完成这项工作。

【解决方案3】：

这对我有用

firebase.storage().ref().child('Audios/file.wav').getDownloadURL().then(function(downloadURL) {
                        console.log('File available at', downloadURL);
 });

【讨论】：

在您的答案中添加解释有助于更好地理解

【解决方案4】：

几年后的 2020 年，我也遇到了同样的问题 xD 结果......当我从这里测试时，我只需要将我的 firebase 安全配置为 public

// Only authenticated users can read or write to the bucket
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
  }
}

为此，在 Firebase 规则选项卡中

// Only authenticated users can read or write to the bucket
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if true;
    }
  }
}

【讨论】：

【解决方案5】：

下面的代码对我有用。它适用于视频文件和图像。

var ref = firebase.storage().ref().child('child');
var file = document.querySelector("#htmlInputTagID").files[0];
var task = ref.child(('file name').toString()).put(file);
var imgURL = "";
task.then(snapshot => {
    snapshot.ref.getDownloadURL().then(url => {
        imgURL = url;//this is the URL I use and it works 
        //for me it can be done also for video files
    });
});

【讨论】：