Я пытаюсь загрузить несколько видеофайлов в хранилище больших двоичных объектов 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>
Я попробовал в своей среде и успешно загрузил файл параллельно в хранилище 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);
Консоль:
Браузер:
Портал: