使用 Firebase 存储时出错

Question

这是我第一次尝试使用 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() {

        }
    );
});

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

Answer 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>

就是这样！