Firebase v9使用uploadString上传调用uploadTask.on监听进度报错问题

问题原因 #

Firebase 9 采用了全新的模块化 API 设计，废弃了旧版本命名空间式的 API 结构，核心方法的返回值发生了变更：

• Firebase 8 中 putString 方法返回的是带 on 方法的 UploadTask 可监听任务对象
• Firebase 9 中 uploadString 方法直接返回 Promise<UploadResult>，本身没有挂载 on 方法，因此调用时会抛出 TypeError: uploadTask.on is not a function 错误，这就是问题的根因。

解决方法 #

如果需要监听上传进度，要使用 Firebase 9 专门提供的可恢复上传方法 uploadBytesResumable，该方法会返回和旧版功能一致的 UploadTask 对象，支持 on 方法监听上传状态。你只需要将原本传入 uploadString 的 base64 格式图片内容转成 Blob 或者 Uint8Array 格式传入即可，修改后的实现代码如下：

// 转换canvas导出的dataUrl为Blob格式
const dataUrl = canvas.toDataURL('image/jpeg', 0.8);
const byteStr = atob(dataUrl.split(',')[1]);
const mimeType = dataUrl.split(',')[0].match(/:(.*?);/)[1];
const u8Arr = new Uint8Array(byteStr.length);
for (let i = 0; i < byteStr.length; i++) {
  u8Arr[i] = byteStr.charCodeAt(i);
}
const fileBlob = new Blob([u8Arr], { type: mimeType });

// 获取可监听进度的上传任务
const uploadTask = uploadBytesResumable(ref(this.$storage, 'profile.jpg'), fileBlob);

// 进度监听逻辑和旧版完全兼容
uploadTask.on('state_changed', 
  (snapshot) => {
    const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
    console.log('Upload is ' + progress + '% done');
  }, 
  (error) => {
    // 处理上传失败逻辑
  }, 
  () => {
    // 处理上传成功逻辑
  }
);

补充说明：如果不需要监听上传进度，直接用 uploadString 配合 async/await 或者 .then 处理结果即可，和你现有未加监听的运行逻辑完全一致。

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