Firebase v9使用uploadString上传后如何获取downloadUrl？

Firebase v9 模块化SDK中，uploadString的返回值本身就是UploadTask对象，无需等待上传完成即可直接捕获；上传完成后需要调用独立的getDownloadURL方法获取文件公共访问地址。

完整实现示例 #

1. 同时获取UploadTask监听进度+上传完成后获取下载地址（then链式写法） #

// 首先导入所需的模块化方法
import { getDownloadURL, uploadString } from "firebase/storage";

const message4 = 'data:text/plain;base64,5b6p5Y+344GX44G+44GX44Gf77yB44GK44KB44Gn44Go44GG77yB';
// 直接接收uploadString返回值即可得到UploadTask
const uploadTask = uploadString(storageRef, message4, 'data_url');

// 可通过uploadTask监听上传进度
uploadTask.on('state_changed', (snapshot) => {
  const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
  console.log('当前上传进度：' + progress.toFixed(2) + '%');
});

// 处理上传完成逻辑
uploadTask
  .then((snapshot) => {
    console.log('Uploaded a data_url string!');
    // 传入快照对应的存储引用，获取下载地址
    return getDownloadURL(snapshot.ref);
  })
  .then((downloadUrl) => {
    console.log('文件公共下载地址：', downloadUrl);
    // 此处可执行地址存储、资源展示等后续操作
  })
  .catch((error) => {
    console.error('上传或获取下载地址失败：', error);
  });

2. async/await 写法 #

import { getDownloadURL, uploadString } from "firebase/storage";

async function uploadStringAndGetUrl() {
  const message4 = 'data:text/plain;base64,5b6p5Y+344GX44G+44GX44Gf77yB44GK44KB44Gn44Go44GG77yB';
  try {
    const uploadTask = uploadString(storageRef, message4, 'data_url');
    // 如需监听进度可在此处添加uploadTask.on逻辑
    const snapshot = await uploadTask;
    const downloadUrl = await getDownloadURL(snapshot.ref);
    console.log('文件公共下载地址：', downloadUrl);
    return downloadUrl;
  } catch (error) {
    console.error('操作失败：', error);
  }
}

注意事项 #

• getDownloadURL是模块化API的独立方法，使用前必须先从firebase/storage包导入
• 获取到的DownloadURL是长期有效的公共访问地址，可直接用于前端资源加载、存储到数据库等场景

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