<template> <div> <input type="file" id="dosya" @change="putDesign()" /> </div> </template> <script> import { initializeApp } from "firebase/app"; import { getStorage, ref, uploadBytes, listAll } from "firebase/storage"; const firebaseConfig = { apiKey: "", authDomain: "", databaseURL: "", projectId: "", storageBucket: "", messagingSenderId: "", appId: "", }; const app = initializeApp(firebaseConfig); const storage = getStorage(app); export default { data() { return { fileName: "", resim: "", photos: [], }; }, methods: { mounted() { // Create a reference under which you want to list const listRef = ref(storage, "design/"); // Find all the prefixes and items. listAll(listRef) .then((res) => { res.prefixes.forEach((folderRef) => { // All the prefixes under listRef. // You may call listAll() recursively on them. console.log(folderRef); }); res.items.forEach((itemRef) => { // All the items under listRef. this.photos.push(itemRef+ " "); }); }) .catch((error) => { // Uh-oh, an error occurred! console.log(error); }); }, }; </script>Puedo agregar archivos a mi Firebase Storage, pero no puedo mostrarlos en mi sitio web. Puedo obtener la ubicación de almacenamiento local, pero no puedo obtener el token de acceso, por lo que no puedo abrir ni mostrar fotos. ¿Hay alguna forma de obtener el token de acceso? Busqué en la documentación de Firebase, pero no pude encontrar nada útil.
Solo necesita obtener la URL de downloadURL para cada elemento en la carpeta. Podría verse así:
import { initializeApp } from "firebase/app"; import { getStorage, ref, uploadBytes, listAll, getDownloadURL } from "firebase/storage"; const firebaseConfig = { apiKey: "", authDomain: "", databaseURL: "", projectId: "", storageBucket: "", messagingSenderId: "", appId: "", }; const app = initializeApp(firebaseConfig); const storage = getStorage(app); export default { data() { return { fileName: "", resim: "", photos: [], }; }, methods: { mounted() { // Create a reference under which you want to list const listRef = ref(storage, "design/"); // Find all the prefixes and items. listAll(listRef) .then((res) => { res.prefixes.forEach((folderRef) => { // All the prefixes under listRef. // You may call listAll() recursively on them. console.log(folderRef); }); res.items.forEach((itemRef) => { // All the items under listRef. getDownloadURL(itemRef).then(downloadURL=>{ this.photos.push(downloadURL); }) }); }) .catch((error) => { // Uh-oh, an error occurred! console.log(error); }); }, };