如何使用JavaScript将Firebase Storage图片URL保存到Realtime Database？

你的代码核心问题是异步执行顺序错误：getDownloadURL 是异步操作，而你将写入数据库的代码放在了它的回调外部，导致执行写入时 announcementURL 还未被赋值，会出现变量未定义的错误。此外，你的存储引用路径没有包含文件名，可能导致上传或获取URL时出现异常。

修正后的代码 #

const file_ann = document.getElementById("image_ann").files[0];
// 修正存储引用：加上文件名，避免路径错误
const storageRef = ref(storage, 'images/announcement/' + file_ann.name);

const metadata_ann = {
    contentType: file_ann.type
};

const uploadAnnouncement = uploadBytesResumable(storageRef, file_ann, metadata_ann);

// 确保在获取到下载URL后再写入数据库
getDownloadURL(uploadAnnouncement.snapshot.ref).then((announcementURL) => {
    console.log('File available at', announcementURL);
    
    // 将写入数据库的逻辑移到回调内部
    return set(ref(database, 'page-content/announcement/'), {
        announcementimg: announcementURL
    });
})
.then(() => {
    window.alert("Announcement Updated!");
})
.catch((error) => {
    console.error("操作失败：", error); // 打印错误详情便于调试
    window.alert("Error!");
});

关键修改点 #

• 将数据库写入操作移入 getDownloadURL 的 .then 回调中，保证只有拿到有效的 announcementURL 后才执行写入
• 修正存储引用路径，添加文件名（file_ann.name），避免上传到无文件名的路径导致的问题
• 串联Promise，将 set 的返回值继续链式调用，统一处理成功和失败逻辑
• 添加错误详情打印，方便调试定位问题

内容的提问来源于stack exchange，提问作者LAAA