• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Pruebas Online
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

98
Vistas
Usando firestore con vue para obtener la URL de la imagen

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:

  1. El almacenamiento de Firebase requiere una función "ref". ¿Cómo importo eso según la documentación de firebase de una manera que no entre en conflicto con la función vue "ref"? Mi intento está abajo, pero no funciona.
  2. Como se configura actualmente a continuación, aparece un error 0, firebase_config__WEBPACK_IMPORTED_MODULE_4 _.storageRef) no es una función. No puedo encontrar la manera de superar esto: sigo revisando la documentación y revisando videos, pero aún no lo he descubierto.

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); });
almost 3 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

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}`); // ....
almost 3 years ago · Juan Pablo Isaza Denunciar

0

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"
almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda