Я пытаюсь создать веб-форму для загрузки файлов в мое хранилище s3 через сервис AWS lamda и службы apigateway. Загрузка работает нормально, и мне нужно добавить индикатор прогресса в форму, чтобы показать пользователю статус и ход их загрузки.
В методологии используется Ajax и пост-запрос.
Написанный мною сценарий, который пытается использовать индикатор выполнения, показан ниже:
$(document).ready(function() {
$("#ObjectUploadBtnId").click(function() {
/*===============================================================*/
/*===============================================================*/
/* Copy and paste these next 23 lines for each file you need to upload */
$.ajax({
url: 'https://zbnr38m2rg.execute-api.eu-west-2.amazonaws.com/presignedurl',
type: 'POST',
contentType: "application/json; charset=utf-8",
data: JSON.stringify({
"BucketName": "BucketNAME",
"methodType": "POST",
"FileName": $('#FileNameId').val()
}, ),
dataType: "json",
xhr: function() {
var xhr = new window.XMLHttpRequest();
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
console.log(e.loaded, e.total)
var percentComplete = e.loaded / e.total;
console.log(percentComplete);
$('#status').html('<b> Uploading -> ' + (Math.round(percentComplete * 100)) + '% </b>');
}
}
return xhr;
},
//beforeSend: function(){ $( '#loader' ).show();},
success: function(res) {
uploadFile(res, res.url);
},
error: function(e) {
$("#urlTextId").html("Failed: Unable to Get Signed Upload Url" + e.responseText);
$("#SignedUrlId").html("");
$("#div-obj-holderId").show();
},
complete: function() {
$('#loader').hide();
}
});
/*===============================================================*/
/*===============================================================*/
});
});
Проблема Индикатор выполнения работает на 100% даже для очень больших файлов. Я попытался диагностировать проблему дальше, и кажется, что переменные e.loaded
e.total
эквивалентны друг другу в самом начале загрузки. Во-вторых, значения не соответствуют фактическому размеру файла, который я пытаюсь загрузить.
Может кто-нибудь указать мне правильное направление проблемы и как ее решить? Спасибо