我想通過在 ImageUrls 狀態上附加的 getDownloadURL 來獲取 url 回傳，getDownloadURL 需要一兩秒鐘來回傳 url，并且代碼似乎繼續運行并且沒有等待它回傳 url
我正在嘗試上傳多張圖片，然后在 Firestore 中創建一個包含圖片網址和描述的物件
const createAlbum = () => {
addDoc(albumCollection, {
name: albumName,
category: category,
images: imageUrls,
description: description,
});
};
const HandleUpload = (files) => {
files.forEach((file) => {
const storageRef = ref(
storage,
`/files/albums/${albumName}/${file.name}`
);
const uploadTask = uploadBytesResumable(storageRef, file);
uploadTask.on(
"state_changed",
(snap) => {},
(err) => {},
() => {
getDownloadURL(uploadTask.snapshot.ref).then((url) => {
setImageUrls((prev) => [...prev, url]);
});
}
);
});
createAlbum();
};
uj5u.com熱心網友回復：
獲取下載 URL（如上傳資料和大多數現代云 API）是一個異步操作。在處理此呼叫時，您的主代碼確實會繼續執行。然后，當下載 URL 可用時，您的then回呼將被呼叫，因此您可以使用它。
為此，需要下載網址需要在任何代碼內的then回呼，從那里被呼叫，或以其他方式同步。
最簡單的解決方法是createAlbum進入then回呼：
uploadTask.on(
"state_changed",
(snap) => {},
(err) => {},
() => {
getDownloadURL(uploadTask.snapshot.ref).then((url) => {
setImageUrls((prev) => [...prev, url]);
createAlbum();
});
}
);
如果你只是想呼吁createAlbum()，一旦所有的上傳完成，可以保持一個柜臺或使用Promise.all()：
const HandleUpload = (files) => {
let promises = files.map((file) => {
const storageRef = ref(
storage,
`/files/albums/${albumName}/${file.name}`
);
return uploadBytesResumable(storageRef, file).then(() => {
return getDownloadURL(uploadTask.snapshot.ref);
});
});
Promise.all(promises).then((urls) => {
setImageUrls(urls)
createAlbum();
})
};
這段代碼利用了回傳的任務uploadBytesResumable也是 a的事實Promise，所以我們可以使用then()它來知道它什么時候完成，然后獲取下載 URL。
請注意，如果setImageUrls是useState鉤子，則該操作也是異步的。我建議將影像 URLcreateAlbum顯式傳遞給，而不是嘗試通過狀態傳遞它，因此createAlbum(urls)
uj5u.com熱心網友回復：
您也可以使用承諾錯誤和回呼來執行一次 createAlbum()
像這樣：
uploadTask.on(
"state_changed",
(snap) => {},
(err) => {},
(),
error => {
console.log('upload error: ', error.message)
},
() => {
getDownloadURL(uploadTask.snapshot.ref).then((url) => {
setImageUrls((prev) => [...prev, url]);
createAlbum();
});
}
)
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/397227.html
上一篇：如何在不一直糾正我的情況下使用背景關系提供程式api和打字稿
下一篇：在函式式組件中回傳React元素