使用带有 vue 的 firestore 获取图像 url

Posted 2023-02-22

【中文标题】使用带有 vue 的 firestore 获取图像 url

【英文标题】：Using firestore with vue to get image url

【发布时间】：2022-01-09 22:35:32

【问题描述】：

我是 Firebase 存储的新手。我已经能够通过 VUE 将 firestore 与文档一起使用，但我正在使用存储图像。

我不断收到错误，我认为这与未能按要求创建参考有关。

问题：

Firebase 存储需要“ref”函数。如何以不与 vue“ref”函数冲突的方式导入每个 firebase 文档？我的尝试如下，但它不起作用。 目前在下面设置，我收到错误 0，firebase_config__WEBPACK_IMPORTED_MODULE_4_.storageRef) 不是函数。我不知道如何克服这个问题 - 我一直在查看文档和查看视频，但我还没有弄清楚。

这里是配置设置：

 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 ;

这里是 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);
);

【参考方案1】：

以下方法可以解决问题：

Firebase 配置：

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 ;

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`);

        // ....

【讨论】：

嗨雷诺！谢谢您的帮助。我认为您的配置结构有效。我正在使用 Vue Setup API，它需要从 vue 导入 ref 函数，并且与 firestore 导入冲突。我应该（a）尝试全局导入 vue ref，（b）将 firebase 导入放在配置文件中，还是（c）做其他事情？

【参考方案2】：

您可以在导入 Firebase Storage 所需的 ref 函数时使用alias，并将其与 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");

我已经使用Code Sandbox测试了上面的代码，并在package.json文件中添加了以下版本的Firebase依赖：

"@firebase/storage": "0.9.0"
"firebase": "9.6.1"