Параллельная загрузка нескольких файлов в лазурном BLOB-объекте с токеном SAS в javascript

Я пытаюсь загрузить несколько видеофайлов в хранилище больших двоичных объектов Azure с помощью токена SAS.

Как вы можете видеть на этом изображении: - Изображение

Глядя в консоль, похоже, что браузер обрабатывает файл и загружает его по частям. Поэтому я не реализовал это в своем коде. Не знаю, правильный ли это путь.

Файлы загружаются успешно, но это занимает много времени.

<div class = "container">
    <div class = "row">
        <div class = "form-group">
            <label for = "Files"></label>
            <input type = "file" id = "fileControl" multiple />
            <br />
            <span class = "" id = "SizeLimitSAS" style = "visibility: hidden; font-size:small"></span>
            <br />
            <progress id = "uploadProgress" class = "form-control" value = "0" max = "100" style = "height: 60px;"></progress>
            <br />
        </div>
        <div class = "form-group">
            <input type = "button" id = "btnUpload" value = "Upload files" />
        </div>
        <br />
        <br />
        <span class = "" id = "countOfFileUploaded" style = "visibility: hidden; font-size:large"></span>
    </div>
</div>
<script src = "~/Scripts/jquery-3.4.1.js"></script>
<script type = "text/javascript">
    document.addEventListener("DOMContentLoaded", init, false);
    function init() {
        document.querySelector('#fileControl').addEventListener('change', handleFileSelect, false);
        sizeLimit = document.querySelector("#SizeLimitSAS");
    }
    function handleFileSelect(e) {
        if (!e.target.files) return;
        var totalSize = 0;
        sizeLimit.innerHTML = "";
        var files = e.target.files;
        for (var i = 0; i < files.length; i++) {
            var f = files[i];
            totalSize += f.size;
        }
        console.info(files)
        console.info(totalSize)
        sizeLimit.innerHTML += "</br>" + niceBytes(totalSize);
        SizeLimitSAS.style.visibility = "visible";
    }

    const units = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
    function niceBytes(x) {
        let l = 0, n = parseInt(x, 10) || 0;
        while (n >= 1024 && ++l) {
            n = n / 1024;
        }
        return (n.toFixed(n < 10 && l > 0 ? 1 : 0) + ' ' + units[l]);
    }

    var count = 0;
    function upload(file, type, url) {
        var ajaxRequest = new XMLHttpRequest();
        ajaxRequest.onreadystatechange = function (aEvt) {
            console.info(ajaxRequest.readyState);
            if (ajaxRequest.readyState == 4)
                console.info(ajaxRequest.responseText);
        };
        ajaxRequest.upload.onprogress = function (e) {
            var percentComplete = (e.loaded / e.total) * 100;
            console.info(percentComplete + "% completed");
            if (percentComplete === 100) {
                count++;
                countOfFileUploaded.innerHTML = count + " file uploaded";
                countOfFileUploaded.style.visibility = "visible";
            }
            uploadProgress.value = percentComplete;
        };
        ajaxRequest.onerror = function (jqXHR, exception, errorThrown) {
            alert(jqXHR.status + "--" + exception + "--" + errorThrown);
        };
        ajaxRequest.open('PUT', url, true);
        ajaxRequest.setRequestHeader('Content-Type', type);
        ajaxRequest.setRequestHeader('x-ms-blob-type', 'BlockBlob');
        ajaxRequest.send(file);
    }
    jQuery("#btnUpload").click(function () {
        var files = fileControl.files;
        for (var i = 0, file; file = files[i]; i++) {
            upload(file, file.type, "https://container.blob.core.windows.net/videos/" + file.name + "?sp=racwdli&st=2023-01-18T12:51:14Z&se=2023-01-21T20:51:14Z&sv=2021-06-08&sr=c&sig=gfgkkbhbkekhbkigyyuvuuQB2XR1ynaSOQ%3D");
            
        }
    });
</script>
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
91
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я попробовал в своей среде и успешно загрузил файл параллельно в хранилище BLOB-объектов Azure с помощью браузера.

Вы можете использовать приведенный ниже код для загрузки файла параллельно с URL-адресом SAS:

Индекс.html

<!-- index.html -->
<!DOCTYPE html>
<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:300px; width: 593px; overflow: scroll;" />
</body>
<script type = "module" src = "index.js"></script>

</html>
 

Index.js

const { BlobServiceClient } = require("@azure/storage-blob");
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 blobSasUrl = "<blob sas url>";
const blobServiceClient = new BlobServiceClient(blobSasUrl);

const containerName = "test";
const containerClient = blobServiceClient.getContainerClient(containerName);
const uploadFiles = async () => {
    try {
        reportStatus("Uploading files...");
        const promises = [];
       for (var fileIndex = 0; fileIndex < fileInput.files.length; fileIndex++) {
            const file = fileInput.files[fileIndex];
            const blockBlobClient = containerClient.getBlockBlobClient(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=blockBlobClient.uploadBrowserData(file,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);
        alert("Done.");
    }
    catch (error) {
            alert(error.message);
    }
}

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

Консоль:

Браузер:

Портал:

Ссылка: Краткое руководство: библиотека хранилища BLOB-объектов Azure v12 — браузер JS — хранилище Azure | Обучение Майкрософт

Другие вопросы по теме