无法从组合中获取数据以获取 firebase 数据

Question

我在 vue 中有一个可组合项，可将数据上传到 firebase 存储。它有效，但我无法从可组合项中获取数据。我认为这与 return 或我定义术语的位置有关？

下面的代码是围绕可用于 firebase 存储的文档构建的 (https://firebase.google.com/docs/storage/web/upload-files)。

useStorage.js

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

const useStorage = () => {
  const error = ref(null);
  const url = ref(null);
  const filePath = ref(null);

  const uploadImage = async (file) => {
    filePath.value = `images/${file.name}`;

    const storageReference = storageRef(projectStorage, 
 filePath.value);

    const uploadTask = 
 uploadBytesResumable(storageReference, file);

    await uploadTask.on(
      "state_changed",
      (snapshot) => {
        const progress =
          (snapshot.bytesTransferred / snapshot.totalBytes) 
 * 100;
        console.log("Upload is " + progress + "% done");
      },
      (err) => {
        console.log(err);
        error.value = err.message;
      },
      () => {
 
        
 getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) 
 => {
          console.log("File available at", downloadURL);
          url.value = downloadURL;
          console.log(url.value); <--HAS CORRECT VALUE
          return url.value; <--DOESNT DO ANYTHING
        });
      }
    );
    console.log(url.value);
  };

   return { url, filePath, error, uploadImage }; <--URL IS 
NOT RETURNING OUT OF THIS COMPOSABLE
};

export default useStorage;

Answer 1

一种更简单的方法是等待 getDownloadUrl：url.value = await getDownloadURL(uploadTask.snapshot.ref)。然后，您可以去掉该函数上的 .then 。现在，return url.value 没有被赋值。

警告：还要在生产环境中写一些捕获 - 以防出现问题。

无法从组合中获取数据以获取 firebase 数据

Cannot get data out of composable to fetch firebase data

javascript

google-cloud-storage

vue.js