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

Question

从 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 is not a function"

uploadTask.on 在版本 8 中使用 putString 工作正常。有人知道发生了什么事吗？提前致谢。

Answer 1

我为任何感兴趣的人找到了一个解决方法，它专门用于 Canvas 元素并使用 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});
}