如何从Firebase Storage获取不带token和alt参数的图片路径

你可以通过两种方式获取不带?alt=media&token=xxx参数的基础存储路径：

方案一：截取下载URL的参数前部分 #

getDownloadURL返回的完整链接是以?分隔基础路径和参数的，直接通过字符串分割提取前半部分即可：

修改你代码中获取下载URL后的逻辑：

getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
  console.log('File available at', downloadURL);
  // 提取不带参数的基础路径
  const baseUrl = downloadURL.split('?')[0];
  const userId = auth.currentUser.uid;
  const docRef = doc(db, 'useraccounts', userId);
  updateDoc(docRef, {
    image: baseUrl, // 存储基础路径而非完整下载URL
  })
  .then(() => {
    console.log("Document successfully updated!");
    getUser();
  })
  .catch((error) => {
    console.error("Error updating document: ", error);
  });
});

方案二：直接通过Storage Reference构造路径 #

不需要调用getDownloadURL，利用上传后的Storage Reference直接构造基础路径，减少一次API请求：

修改上传完成后的回调逻辑：

() => {
  const storageRef = uploadTask.snapshot.ref;
  // 拼接基础存储路径
  const baseUrl = `https://firebasestorage.googleapis.com/v0/b/${storageRef.bucket}/o/${encodeURIComponent(storageRef.fullPath)}`;
  console.log('File base path:', baseUrl);
  const userId = auth.currentUser.uid;
  const docRef = doc(db, 'useraccounts', userId);
  updateDoc(docRef, {
    image: baseUrl,
  })
  .then(() => {
    console.log("Document successfully updated!");
    getUser();
  })
  .catch((error) => {
    console.error("Error updating document: ", error);
  });
}

两种方案对比：

• 方案一实现简单，依赖getDownloadURL返回的结果，适合需要同时获取完整下载URL的场景；
• 方案二更高效，无需额外API调用，适合仅需存储基础路径的场景。

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