我在 vue 中有一個可組合的,可以將資料上傳到 firebase 存盤。它有效,但我無法從可組合中獲取資料。我認為這與退貨或我在何處定義術語有關?
下面的代碼是圍繞可用于 firebase 存盤的檔案 ( https://firebase.google.com/docs/storage/web/upload-files )構建的。
使用Storage.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;
uj5u.com熱心網友回復:
一個更簡單的方法是等待 getDownloadUrl: url.value = await getDownloadURL(uploadTask.snapshot.ref)。然后,您可以擺脫.then該功能。現在,return url.value被分配給什么都沒有。
警告:還要在生產環境中撰寫某種捕獲 - 以防出現問題。
轉載請註明出處,本文鏈接:https://www.uj5u.com/yidong/385875.html
