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

Question

我是 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);
});

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

        // ....

Answer 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 测试了上面的代码，并将以下版本的 Firebase 依赖项添加到 package.json 文件中：

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

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

Using firestore with vue to get image url

javascript

google-cloud-storage

firebase

vue.js