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

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不是函数“

版本8中的uploadTask.on与putString一起工作得很好。有人知道怎么回事吗？提前谢谢。

Answer 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});
}

Answer 2

uploadString()返回一个uploadTask.You，使用它监视上传的状态