javascript - Azure Blob 存储多个同时上传的进度

问题描述

我正在尝试从 JavaScript 将多个文件同时上传到 Azure BLOB 存储。我不确定它是如何处理并行性的，但我试图为每个文件/上传/承诺设置单独的进度条。

现在调用了进度函数，但只给出了“loadedBytes”我需要一种方法来知道要更新哪个进度条。有人建议 onload 给出一个标识符，它似乎没有 onload 事件。当我使用下面的代码时，索引始终是循环中的最后一个。

   try {
        console.log("Uploading files…&quot;);
        var inputElement = document.getElementById('fileSelector');

        const promises = [];
        
        for (var fileIndex = 0; fileIndex < inputElement.files.length; fileIndex++) {
            const file = inputElement.files[fileIndex];
            var thisToken = await this.Instance.invokeMethodAsync('jsGetSASToken', file.name);
            var containerURL = new azblob.ContainerURL(thisToken, azblob.StorageURL.newPipeline(new azblob.AnonymousCredential));
            const blockBlobURL = azblob.BlockBlobURL.fromContainerURL(containerURL, file.name);
            
            var blobUploadOptions = {
                blockSize: 4 * 1024 * 1024, // 4MB block size
                parallelism: 20, // 20 concurrency
                metadata: { 'testindex': fileIndex.toString() },                    
                progress: function (ev) {
                    var percentdone = ((ev.loadedBytes / file.size) * 100);

                    // Jumps around because loadedBytes is different for each upload
                    document.getElementById('percentdone-' + fileIndex).innerHTML = percentdone.toFixed(2) + "%";

                    // fileIndex is always the last item in the loop                        
                }
                
            };

            promises.push(
                azblob.uploadBrowserDataToBlockBlob(
                    azblob.Aborter.none,
                    file,
                    blockBlobURL,
                    blobUploadOptions
                )
            );
        }

        await Promise.all(promises);            
        console.log('Done.');           
    } catch (error) {
        console.log("File Upload Error");
        console.log(error);
    }

标签： javascriptazureazure-blob-storage

解决方案

似乎这个问题是由fileIndex. 我file.name用作标识符，一切正常。试试下面的代码：

<html>

<body>

    <button id="select-button">Select and upload files</button>
    <input type="file" id="file-input" multiple style="display: none;" />
    <div id="showProgress"></div>


    <p><b>Status:</b></p>
    <p id="status" style="height:160px; width: 593px; overflow: scroll;" />

    
</body>
<script src="./azure-storage-blob.js" charset="utf-8"></script>
<script>

const selectButton = document.getElementById("select-button");
const fileInput = document.getElementById("file-input");
const status = document.getElementById("status");

const reportStatus = message => {
    status.innerHTML += `${message}<br/>`;
    status.scrollTop = status.scrollHeight;
}

const accountName = "storage account";
const sasString = "sas token";
const containerName = "container";

const containerURL = new azblob.ContainerURL(
    `https://${accountName}.blob.core.windows.net/${containerName}?${sasString}`,
    azblob.StorageURL.newPipeline(new azblob.AnonymousCredential));

const uploadFiles = async () => {
    try {
        reportStatus("Uploading files...");
        const promises = [];
        for (var fileIndex = 0; fileIndex < fileInput.files.length; fileIndex++) {
            const file = fileInput.files[fileIndex];
            const blockBlobURL = azblob.BlockBlobURL.fromContainerURL(containerURL, file.name);

            document.getElementById('showProgress').innerHTML += file.name +":<div id='progress-"+ file.name +"'></div>"
            

            var blobUploadOptions = {
                blockSize: 4 * 1024 * 1024, // 4MB block size
                parallelism: 20, // 20 concurrency
                metadata: { 'testindex': fileIndex.toString() },                    
                progress: function (ev) {
                    var percentdone = ((ev.loadedBytes / file.size) * 100);
                    var progessItem = document.getElementById('progress-' + file.name);
                    progessItem.innerHTML = percentdone.toFixed(2) + "%";                     
                }
            };
            var promise = azblob.uploadBrowserDataToBlockBlob(
                azblob.Aborter.none, file, blockBlobURL,blobUploadOptions);
            
            promise.then((result)=>{
                var progessItem = document.getElementById('progress-' + file.name);
                progessItem.innerHTML += "  <a href="+result._response.request.url+">file link</a>" 
                
            });

            promises.push(promise);
        }
        await Promise.all(promises);

        reportStatus("Done.");
    } catch (error) {
        console.log(error)
    }
}

selectButton.addEventListener("click", () => fileInput.click());
fileInput.addEventListener("change", uploadFiles);


</script>

</html>

结果：

更新结果：

javascript - Azure Blob 存储多个同时上传的进度

问题描述

解决方案

推荐阅读