如何在使用浏览器方法将文件上传到 Azure Blob 存储时获得进度

Question

当我尝试将文件上传到我的 blob 存储时，我得到的进度百分比始终为 0 或 100。（上传没有问题，文件正在准确上传到我的存储中。唯一的问题是进度百分比）

这是调用 uploadFiles 方法的渲染代码

    render(){
        if(this.props.files.length > 0)
            this.uploadFiles(this.props.files);
        return (<div></div>);
    }

这是上传文件方法

uploadFiles = (files) => {
        var accountName = this.props.accountName;
        var SasToken = this.props.sasToken;
        var blobUri = 'https://' + accountName + '.blob.core.windows.net';
        var blobService = AzureStorage.Blob.createBlobServiceWithSas (blobUri, SasToken);
        var containerName = 'my-blob';
        Array.from(files).forEach(file => {
            var customBlockSize = file.size > 1024 * 1024 * 32 ? 1024 * 1024 * 4 : 1024 * 512;
            blobService.singleBlobPutThresholdInBytes = customBlockSize;
            var finishedOrError = false;
            var speedSummary = blobService.createBlockBlobFromBrowserFile(containerName, file.name, file, {blockSize : customBlockSize},(error, result, response) => {
                if(error){
                    console.log(error);
                } else {
                    console.log(result);
                    finishedOrError = true;
                    console.log(response);
                }            


            })  
    /*Here when I tried to console, I am always getting process variable value as zero which is declared in refreshProgress() method*/
            function refreshProgress() {
                setTimeout(function () {
                    if (!finishedOrError) {
                        var process = speedSummary.getCompletePercent();
                        console.log('entered',process);
                        refreshProgress();
                    }
                }, 300);
            }

          refreshProgress();

        });
    }

我提到这个 https://dmrelease.blob.core.windows.net/azurestoragejssample/samples/sample-blob.html 用于将文件上传到 Azure。但是进度部分我不清楚。

请帮我解决这个问题。提前致谢

Answer 1

如果您查看 speedSummary 的源代码，您会注意到它扩展了 EventEmitter 并发出了 progress 事件。您需要做的就是在您的代码中订阅此事件并调用方法来获取进度。

例如伪代码（未测试）：

speedSummary.on('progress', function() {
  var percentComplete = speedSummary.getCompletePercent(2);
  console.log('Upload Complete (%): ' + percentComplete);
});

如何在使用浏览器方法将文件上传到 Azure Blob 存储时获得进度

How to get progress while uploading file to azure blob storage using Browser method

javascript

azure

progress-bar

azure-blob-storage