我有一組影像，我正在將這些影像上傳到 Firebase 存盤。
data = {
...data,
downloadedUrl: [],
};
if (data?.image?.length) {
for (const image of data?.image) {
await uploadFile(image, data);
}
}
uploadFile處理將影像上傳到 firebase 的邏輯。
const uploadFile = useCallback((file, data) => {
if (!file) return;
const storageRef = ref(storage, `/images/${file.name}`);
const uploadTask = uploadBytesResumable(storageRef, file);
uploadTask.on(
"state_changed",
(snap_shot) => {},
(err) => console.log(err),
async () => {
await getDownloadURL(uploadTask.snapshot.ref).then((url) => {
data.downloadedUrl.push(url);
});
}
);
}, []);
獲取downloadedUrlfrom需要幾秒鐘，當我獲取所有 url 時uploadTask，我想將其存盤downloadedUrl在 firebase中。
當前方法的問題是，在獲取 url 之前，另一個函式開始執行，我無法使用
Here's the full function 當有人點擊表單時將這些資料上傳到 firestorefirestore
downloadedUrlsubmit
const handleFormSubmit = useCallback(
async (data) => {
setLoading(true);
data = {
...data,
downloadedUrl: [],
};
if (data?.image?.length) {
for (const image of data?.image) {
await uploadFile(image, data);
}
}
if (data.downloadedUrl.length) {
uploadDataToFirestore(data);
}
if (!data.downloadedUrl?.length) {
dispatch(handleAlertState({ message: "Error Occured!!!" }));
router.push("/services");
return;
}
setLoading(false);
router.push("/");
},
[dispatch, router, uploadDataToFirestore, uploadFile]
);
const uploadDataToFirestore = useCallback(
async (data) => {
await setDoc(doc(db, "form-responses"), data)
.then((response) => {
console.log("response", response);
dispatch(
handleAlertState({
message: "Success. Your request has been sent. Thank You.",
})
);
})
.catch((error) => {
console.log("error", error);
});
},
[dispatch]
);
下面的代碼塊在影像上傳到云存盤時執行代碼。我想等待下載的Url，然后將網址上傳到firebase firestore。
if (!data.downloadedUrl?.length) {
dispatch(handleAlertState({ message: "Error Occured!!!" }));
router.push("/services");
return;
}
uj5u.com熱心網友回復：
- 創建承諾陣列
- 使用Promise.all監視每一個承諾
const uploadFile = useCallback((file, data) => {
return new Promise((resolve, reject) => {
if (!file) reject();
const storageRef = ref(storage, `/images/${file.name}`);
const uploadTask = uploadBytesResumable(storageRef, file);
uploadTask.on(
'state_changed',
snap_shot => {},
err => reject(err),
() => resolve(getDownloadURL(uploadTask.snapshot.ref)),
);
});
}, []);
let allPromises = [];
if (data?.image?.length) {
for (const image of data?.image) {
allPromises.push(uploadFile(image, data));
}
}
let uploadedUrls = await Promise.all(allPromises);
console.log(uploadedUrls);轉載請註明出處，本文鏈接：https://www.uj5u.com/net/489319.html
標籤：javascript 反应 火力基地 谷歌云火库 谷歌云存储
上一篇：TableData.js:57洗掉https://clientdata-dd88a-default-rtdb.firebaseio.com/userData.json/:${id}