使用 Firebase 存储时出错答案

【问题标题】：Error While Working With Firebase Storage使用 Firebase 存储时出错
【发布时间】：2018-01-09 18:42:32
【问题描述】：

这是我第一次尝试使用 Firebase 存储，我正在学习 Firebase 提供的本教程：

https://www.youtube.com/watch?v=SpxHVrpfGgU

我似乎一步一步地按照教程进行操作，但是，我收到以下错误，我找不到解决方案：

firebase-storage.js:3469 Uncaught Error: No Storage Bucket defined in Firebase Options.
    at t.ref (firebase-storage.js:3469)
    at HTMLInputElement.<anonymous> (myFile.js:18)

当我点击“t.ref”时，它会引导我进入以下问题：

catch(error) {
   throw new Error(
       'Cannot instantiate firebase-storage.js - ' +
       'be sure to load firebase-app.js first.'
)

这是我的 HTML：

<!doctype html>

<html lang="en">

<head>
    <title>...</title>
    <link rel="stylesheet" type="text/css" href="stylesheets.css" />

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="https://www.gstatic.com/firebasejs/4.1.5/firebase.js"></script>
    <script>
        // Initialize Firebase
        var config = {
            apiKey: "...",
            authDomain: "...",
            databaseURL: "...",
            projectId: "...",
            storageBucket: "",
            messagingSenderId: "..."
        };
        firebase.initializeApp(config);
    </script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</head>

<body>
    <nav>...</nav>

    <progress value="0" max="100" id="uploader" style="margin-top: 35px;">0%</progress>
    <input type="file" value="uploader" id="fileButton" />

    <script src="myFile.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

</body>

</html>

还有我对应的Javascript：

// Get elements
var uploader = document.getElementById('uploader');
var fileButton = document.getElementById('fileButton');

// Listen for file selection
fileButton.addEventListener('change', function(e) {
    // Get file
    var file = e.target.files[0];

    // Create a storage reference
    var storageRef = firebase.storage().ref('mover_docs/' + file.name);

    // Upload a file
    var task = storage.put(file);

    // Update progress bar
    task.on('state_changed',

        function progress(snapshot) {
            var percentage = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
            uploader.value = percentage;
        },

        function error(err) {

        },

        function complete() {

        }
    );
});

我想我的主要问题是，这个错误是因为在初始化 Firebase 区域中找到的 storageBucket 有一个空值，还是我缺少其他东西？

【问题讨论】：

我注意到我在初始化时缺少必要的存储桶位置，但我正在尝试找出正确的路径，因为我现在遇到了 404 错误。 {代码：404，消息：“未找到。无法访问存储桶 Buckets/your-storage”}

标签： javascript html firebase firebase-realtime-database firebase-storage

【解决方案1】：

需要做的是复制投射在空文件上方的 Firebase 上“存储”选项卡中的链接。它看起来类似于这样：

gs://projectName-ci4w0.appspot.com/

现在，只需删除 gs:// 和 .com 之后的最后一个正斜杠。将这个新形成的链接放入 Firebase for Storage 的规则部分，如下所示：

 match /b/projectName-ci4w0.appspot.com/o {

最后，在您的代码中为 Firebase 的初始化部分放置相同的新链接，如下所示：

<script>
  var config = {
     apiKey: "...",
     authDomain: "...",
     databaseURL: "...",
     projectId: "...",
     storageBucket: "projectName-ci4w0.appspot.com",
     messagingSenderId: "..."
};
firebase.initializeApp(config);
</script>

就是这样！

【讨论】：

这就解释了！谢谢

【解决方案2】：

就我而言，我只是不注意在存储桶 URL 的末尾添加了空格。希望有人能帮忙，因为我花了半个小时才找到这个。

storageBucket: "appname.appspot.com "

【讨论】：