Firebase 9 和 ref function 与 Vue 组合

Question

我想将图像上传到 firebase 存储，版本 9。我有适用于 firestore 的工作代码，但我终生无法理解有关上传的 firebase 文档，以及如何使其适用于 Vue（这也需要导入REF 功能）。

我的问题是：如何在 Vue 中导入 ref function 以及从 firebase firestore 导入和使用 ref function？

这就是我所拥有的。 用 a.value 包装 Firebase ref 感觉不对，但我只是把它放在那里以克服 vue 错误。

vue 组件代码片段：<-- 这行得通

if (imageFile.value) {
        await uploadImage(imageFile.value);
        console.log("image:" + url.value);
      }

useStorage.js <--这就是试图从 Firebase 8 转换为 9 时一切都崩溃的地方。它是 vue Ref function 吗？

import { ref } from "vue";
import { projectStorage } from "../firebase/config";
import { uploadBytesResumable, getDownloadURL } from 
"@firebase/storage";


const useStorage = () => {
const error = ref(null);
const url = ref(null);
const filePath = ref(null);
  
 //I need to use ref with firestore here
 const uploadImage = async (file) => {
    filePath.value = `images/${file.name}`;
    const storageRef = ref(projectStorage, 
  filePath.value).value;


   try {
     const res = await storageRef.put(file);
     url.value = res.ref.getDownloadURL();
   } catch (err) {
     console.log(err.message);
     error.value = err.message;
   }
 };

return { url, filePath, error, uploadImage };
};

export default useStorage;

配置.js

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getStorage } from "firebase/storage";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  [info]
};

// init firebase
const firebaseApp = initializeApp(firebaseConfig);

// init firestore service
const db = getFirestore(firebaseApp);

// init firestore authorization
const auth = getAuth(firebaseApp);


const projectStorage = getStorage(firebaseApp);



export { db, projectStorage, auth };

Answer 1

您可以为任一导入设置别名，如下所示：

import { ref } from "vue";
import { projectStorage } from "../firebase/config";
import { ref as storageRef } from "@firebase/storage";


const fileRef = storageRef(projectStorage, filePath.value);
// use storageRef here ^^^ instead of ref from vue

另结帐： 如何在 javascript/es6 中导入两个同名的类？