Soy nuevo en el almacenamiento de base de fuego. Pude usar firestore con documentos usando VUE, pero estoy usando almacenamiento para imágenes.
Recibo errores continuos y creo que se relaciona con no poder crear la referencia según lo requerido.
Preguntas:
Aquí está la configuración de configuración:
import { initializeApp } from "firebase/app"; import { getFirestore } from "firebase/firestore"; import { getStorage, ref } from "firebase/storage"; const firebaseConfig = { [Info] }; // init firebase initializeApp(firebaseConfig); // init firestore service const db = getFirestore(); // Get a reference to the storage service, which is used to create references in your storage bucket const storage = getStorage(initializeApp(firebaseConfig)); const storageRef = ref(storage); export { db, storage, storageRef };Aquí está la configuración de Vue:
import { computed, ref } from "vue"; //firebase imports import { db, storage, storageRef } from "../../firebase/config"; import { collection, getDocs } from "firebase/firestore"; import { getDownloadURL } from "firebase/storage"; export default { name: "Name", setup() { const imagesRef = storageRef(storage); getDownloadURL(imagesRef).then((url) => { // Insert url into an <img> tag to "download" console.log(url); });Lo siguiente hará el truco:
Configuración de base de fuego:
import { initializeApp } from "firebase/app"; import { getFirestore } from "firebase/firestore"; import { getStorage } from "firebase/storage"; const firebaseConfig = { apiKey: "...", // ... }; const firebaseApp = initializeApp(firebaseConfig); const db = getFirestore(firebaseApp); const storage = getStorage(firebaseApp); export { db, storage };Componente Vue.js:
// ... <script> import { db, storage } from '../../firebase/config'; // Import db only if you need to use Firestore in this component import { collection, // ... } from 'firebase/firestore'; // Idem, only if you need to use Firestore in this component import { ref, getDownloadURL, // ... } from 'firebase/storage'; export default { // ... data: () => ({ // ... }), methods: { async uploadFile(file) { try { const fileName = file.name; const fileRef = ref(storage, `myFolder/${fileName}`); // ....Puede usar un alias al importar la función ref requerida por Firebase Storage y distinguirla de la requerida por Vue.
import Vue from "vue"; import App from "./App.vue"; import { initializeApp } from "firebase/app"; import { getFirestore } from "firebase/firestore"; import { getStorage, ref as refStorage } from "firebase/storage"; const firebaseConfig = { [Info] }; // init firebase const firebaseApp = initializeApp(firebaseConfig); // init firestore service const db = getFirestore(); const storage = getStorage(firebaseApp); // Get a reference to the storage service, which is used to create references in your storage bucket const storageRef = refStorage(storage); export { db, storage, storageRef }; new Vue({ render: (h) => h(App) }).$mount("#app");Usé Code Sandbox para probar el código anterior y agregué las siguientes versiones de las dependencias de Firebase al archivo package.json:
"@firebase/storage": "0.9.0" "firebase": "9.6.1"