从 snapshot.bytesTransferred / snapshot.totalBytes Firebase 上传进度数超过 100答案

【问题标题】：Firebase upload progress number going over 100 from snapshot.bytesTransferred / snapshot.totalBytes从 snapshot.bytesTransferred / snapshot.totalBytes Firebase 上传进度数超过 100
【发布时间】：2020-04-24 10:24:28
【问题描述】：

这在最近之前一直很好用。

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

        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 是否改变了一些东西，但无论是什么，我都很想听听人们的 cmets！

干杯。

【问题讨论】：

请编辑问题以显示此处使用的所有代码，包括接收uploadProgress 值的任何组件，甚至是日志语句。我们应该能够跟踪存储回调和记录消息的代码行之间可能发生的所有事情。
@DougStevenson 谢谢，我已经更新了我的问题。
我建议同时记录 snapshot.bytesTransferred 和 snapshot.totalBytes 的值，这会导致计算没有意义。
@DougStevenson 好主意，问题已编辑！
日志语句是什么样的？您应该知道 totalBytes 永远不会改变。这就是您要上传的文件的大小。

标签： node.js reactjs firebase react-native firebase-storage

【解决方案1】：

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

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

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

我已经提交了一份关于 firebase sdk 的错误报告，希望不久之后会发布一个更好的答案...

【讨论】：