来自snapshot.bytesTransferred / snapshot.totalBytes的Firebase上载进度数超过100

Question

直到最近，这种方法一直运行得很好。

上传文件时，我会像这样跟踪上传进度：

        uploadImage = uri => {
            const image = Platform.OS === 'ios' ? uri.replace('file://', '') : uri;
            const Blob = RNFetchBlob.polyfill.Blob;
            const fs = RNFetchBlob.fs;
            window.XMLHttpRequest = RNFetchBlob.polyfill.XMLHttpRequest;
            window.Blob = Blob;

            let uploadBlob = null;

            const imageRef = firebase
            .storage()
            .ref('categories/')
            .child(`${this.props.userData.uid}`)
            .child(`${this.state.img}`);

            const mime = this.state.isVideo ? 'video/mp4' : 'image/jpg';

            fs.readFile(image, 'base64')
            .then(data => {
                return Blob.build(data, {type: `${mime};BASE64`});
            })
            .then(blob => {
                uploadBlob = blob;
                this.uploadTask = imageRef.put(blob, {contentType: mime});

                this.uploadTask.on(
                'state_changed',
                snapshot => {
                    // Observe state change events such as progress, pause, and resume
                    // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
                    const progress =
                    (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
                    LayoutAnimation.easeInEaseOut();
                    this.setState({ uploadProgress: progress });
                    console.log(`Upload is ${progress}% done`);
                    switch (snapshot.state) {
                    case firebase.storage.TaskState.PAUSED: // or 'paused'
                        console.log('Upload is paused');
                        break;
                    case firebase.storage.TaskState.RUNNING: // or 'running'
                        console.log('Upload is running');
                        break;
                    }
                },
                error => {
                    // Handle unsuccessful uploads

                },
                () => {
                    // Handle successful uploads on complete
                },
                );
            });
        };

下面是我在组件中显示数字的方式：

<Text>          
  {Math.trunc(this.state.uploadProgress)}%  
 </Text>

我在组件状态中设置数字，然后将其显示给用户。由于某种原因，最近这个数字超过了100，它显示了一些很大的东西，比如38154017。

当我记录进度时，我可以看到哪里出了问题：

 console.log(`Upload is ${progress}% done`);

 LOG  Upload is 0% done
 LOG  Upload is 38.15395542514653% done
 LOG  Upload is 38.15395542514653% done
 LOG  Upload is 38154017.271191105% done
 LOG  Upload is 100% done

由于某些原因，进度是将第三个日志乘以100？这只发生了大约一个月，在研究之后，人们似乎仍然这样做。

以下是bytesTransferred和totalBytes的日志：

console.log(snapshot.bytesTransferred);

LOG  bytesTransferred 0
LOG  bytesTransferred 0262144
LOG  bytesTransferred 262144
LOG  bytesTransferred 262144524288
LOG  bytesTransferred 786432
LOG  bytesTransferred 786432176078

console.log(snapshot.totalBytes);

LOG  totalBytes 962510
LOG  totalBytes 962510
LOG  totalBytes 962510
LOG  totalBytes 962510
LOG  totalBytes 962510
LOG  totalBytes 962510
LOG  totalBytes 962510

我不知道firebase是否改变了什么，但无论它是什么，我都很乐意听到人们的评论！

干杯。

Answer 1

我知道这并不理想，但一个潜在的解决办法是，如果它达到100以上，那么可以根据当前进度添加一个数字，以使其流动并复制不断增加的上传任务……

以下是我将使用的临时解决方案：

this.setState({ 
   uploadProgress: progress > 100 ? this.state.uploadProgress + 7 : progress 
});

我已经提交了一份关于firebase sdk的错误报告，希望很快能发布一个更好的答案……