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() {

        }
    );
});

我想我的主要问题是，是否发生此错误，因为在初始化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>

就是这样！

Answer 2

在我的情况下，我只是通过注意力在桶URL的末尾添加了空格。希望有人会帮助我，因为我花了半个小时来找到它。

storageBucket: "appname.appspot.com "

使用Firebase存储时出错

2 个答案: