Vuefire Storage未等待图片上传完成，无法获取URL问题求助

你的代码存在几个逻辑问题，导致上传完成后url.value返回null，以下是修正方案和原因说明：

修正后的代码 #

const submit = async () => {
  // 先校验是否选择了文件
  if (!file.value?.[0]) {
    console.log('请先选择要上传的文件')
    return
  }

  try {
    const storage = useFirebaseStorage()
    const avatarFileRef = storageRef(storage, fileName.value)
    const { upload, url } = useStorageFile(avatarFileRef)

    // 等待上传操作完成
    await upload(file.value[0])
    
    // 优先用响应式url，若未及时更新则手动获取下载链接
    const downloadUrl = url.value || await getDownloadURL(avatarFileRef)
    
    console.log(downloadUrl)
    updateAuth(downloadUrl)
  } catch (error) {
    console.log('上传失败:', error)
    // 此处可添加用户可见的错误提示
  }
}

问题分析与解决要点 #

1. 不要混用await和.then()
   同时使用await upload()和.then()会打乱异步逻辑的执行顺序，统一用try/catch处理异步错误，代码可读性和可靠性更高。

2. 无需依赖uploadProgress判断上传完成
   upload()返回的Promise只会在上传完全结束后才resolve，此时上传进度必然是100%，额外判断uploadProgress.value == 1完全多余，反而可能因为响应式更新的微小延迟导致逻辑出错。

3. 处理响应式url的更新延迟
   虽然useStorageFile的url会自动绑定文件下载链接，但Vue的响应式更新存在微小延迟，有时upload()刚resolve时url.value还未同步更新。这种情况下，直接调用getDownloadURL(avatarFileRef)手动获取链接是最可靠的方式。

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