javascript 使用firestore和vue获取图片url

xienkqul 于 2023-05-27 发布在 Java

关注(0)|答案(2)|浏览(189)

我是消防仓库的新手。我已经能够使用firestore与使用VUE的文档，但我使用的是图像存储。
我得到了连续的错误，我相信它涉及到未能创建所需的参考。
问题：

Firebase存储需要“ref”函数。我如何导入每个firebase文档的方式，不与vue的“ref”函数冲突？我的尝试在下面，但它不起作用。
1.正如下面的当前设置，我得到一个错误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);
});

JavaScript

来源：https://stackoverflow.com/questions/70216338/using-firestore-with-vue-to-get-image-url

2条答案

按热度按时间

bxjv4tth1#

下面的代码可以做到这一点：

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

        // ....

赞(0）回复(0）举报 2023-05-27

tct7dpnv2#

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

赞(0）回复(0）举报 2023-05-27

我来回答

javascript 使用firestore和vue获取图片url

2条答案

相关问题

热门标签

最新问答