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

Question

我在Vue中编写了一个组件，它将数据上传到Firebase存储。它能够正常工作，但是我无法从这个组件中获取数据。我认为这与返回值或定义项的位置有关。

下面的代码是基于Firebase Storage文档（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;

- jdost_26

---

一个更简单的方法是等待 getDownloadUrl：url.value = await getDownloadURL(uploadTask.snapshot.ref)。然后，你就可以摆脱那个函数里的then。现在，return url.value 没有被分配给任何东西。 - Marty

@Marty，这个更简洁、更简单，而且完成了任务。谢谢！ - jdost_26

太好了，很高兴它起作用了！我把它添加为响应，以防其他人有同样的问题。 - Marty

Answer 1

一个更简单的方法是等待 getDownloadUrl: url.value = await getDownloadURL(uploadTask.snapshot.ref)。然后，您可以摆脱该函数上的 .then。现在，return url.value 没有被分配到任何内容。 警告：在生产环境中还要编写某种 catch - 以防万一出现问题。

- Marty