使用 js 列出 firebase 存储图像

Question

我正在尝试恢复保存在 firebase 存储中的图像，但没有成功。现在我有这个错误： Uncaught ReferenceError: storageRef is not defined at 51. 以下是我的完整文件 (index.php)。为了安全，我在firebaseConfig中隐藏了我的数据，但我在本地项目中有数据。

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Importação Firebase -->    
    <script src="https://www.gstatic.com/firebasejs/7.6.1/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.6.1/firebase-storage.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.6.1/firebase-firestore.js"></script>

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <script>
        
        function initializeApp(){

            var firebaseConfig = {
            apiKey: "I have hidden",
            authDomain: "",
            databaseURL: "",
            projectId: "",
            storageBucket: "",
            messagingSenderId: "",
            appId: ""
            };

            // Initialize Firebase
            firebase.initializeApp(firebaseConfig);
            const storageRef = firebase.storage().ref();
            console.log(storageRef);            
        }
        
    </script>
    

    <title>Hello, world!</title>
  </head>

  <body onload="initializeApp()">

    <h1>Hello, world!</h1>


    <script>
        

      // Create a reference for folder 'imagens'
      var listRef = storageRef.child("imagens");
      // Find all the prefixes and items.
      listRef
        .listAll()
        .then((res) => {
          res.prefixes.forEach((folderRef) => {
            // All the prefixes under listRef.
            // You may call listAll() recursively on them.
          });
          res.items.forEach((itemRef) => {
            // All the items under listRef.
            itemRef.getDownloadURL().then((url) => {
              imagesArray.push(url);
              console.log(imagesArray);
            });
          });
        })
        .catch((error) => {
          // Uh-oh, an error occurred!
        }); 

    </script>    
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>        

  </body>
</html>

Answer 1

const storageRef = firebase.storage().ref();
  // Create a reference for folder 'images'
  var listRef = storageRef.child("images");
  // Find all the prefixes and items.
  listRef
    .listAll()
    .then((res) => {
      res.prefixes.forEach((folderRef) => {
        // All the prefixes under listRef.
        // You may call listAll() recursively on them.
      });
      res.items.forEach((itemRef) => {
        // All the items under listRef.
        itemRef.getDownloadURL().then((url) => {
          imagesArray.push(url);
          console.log(imagesArray);
        });
      });
    })
    .catch((error) => {
      // Uh-oh, an error occurred!
    });

Answer 2

我输入了 type="text/javascript" 并且成功了。谢谢

<script type="text/javascript">
        const storageRef = firebase.storage().ref();
          // Create a reference for folder 'images'
          var listRef = storageRef.child("imagens");
          // Find all the prefixes and items.
          listRef
            .listAll()
            .then((res) => {
              res.prefixes.forEach((folderRef) => {
                // All the prefixes under listRef.
                // You may call listAll() recursively on them.
              });
              res.items.forEach((itemRef) => {
                // All the items under listRef.
                itemRef.getDownloadURL().then((url) => {
                  var imagesArray = [];     
                  imagesArray.push(url);
                  console.log(imagesArray);
                });
              });
            })
            .catch((error) => {
              // Uh-oh, an error occurred!
            });
    </script>

使用 js 列出 firebase 存储图像

Listing firebase storage images with js

javascript

firebase-storage