在 Firebase v9 错误中使用 uploadString 监控上传

Posted 2023-03-22

【中文标题】在 Firebase v9 错误中使用 uploadString 监控上传

【英文标题】：Monitoring upload using uploadString in Firebase v9 error

【发布时间】：2021-12-08 12:53:35

【问题描述】：

从 Firebase 8 升级到 9 时，我遇到了一个问题。我需要监控 uploadString 的上传进度，但 uploadTask.on 似乎失败了。

var uploadTask = uploadString(ref(this.$storage, 'profile.jpg'), canvas.toDataURL('image/jpeg', 0.8), 'data_url');

uploadTask.on('state_changed', 
  (snapshot) => 
    const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
    console.log('Upload is ' + progress + '% done');
  , 
  (error) => 
    // Handle unsuccessful uploads
  , 
  () => 
    // Handle successful uploads on complete
  
);

图片已上传，但出现以下错误：

“TypeError：uploadTask.on 不是函数”

uploadTask.on 和版本 8 中的 putString 可以正常工作。有谁知道发生了什么？提前致谢。

【参考方案1】：

我为任何感兴趣的人找到了一种解决方法，它专门适用于画布元素并使用 uploadBytesResumable 代替。如果有人知道的话，仍然对如何使用 uploadString 实现这一点感兴趣。

var img = canvas.toDataURL('image/jpeg', 0.8);
var file = now.dataURItoBlob(img);
var uploadTask = uploadBytesResumable(ref(now.$storage, 'profile.jpg'), file);

uploadTask.on('state_changed', 
  (snapshot) => 
    const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
    console.log('Upload is ' + progress + '% done');
  , 
  (error) => 
    // Handle unsuccessful uploads
  , 
  () => 
    // Handle successful uploads on complete
  
);

dataURItoBlob函数如下

dataURItoBlob(dataURI) 
    var byteString;
    if (dataURI.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(dataURI.split(',')[1]);
    
    else
        byteString = unescape(dataURI.split(',')[1]);
    
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
    var ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) 
        ia[i] = byteString.charCodeAt(i);
    
    return new Blob([ia], type:mimeString);

【参考方案2】：

uploadString()返回一个uploadTask。你用它来监控你的上传状态