Ajax xhr.upload.onprogress печатает неправильные значения для загруженного и итого - PullRequest
0 голосов
/ 11 декабря 2019

Я пытаюсь создать веб-форму для загрузки файлов в мое хранилище 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 эквивалентны друг другу в самом начале загрузки. Во-вторых, значения не соответствуют фактическому размеру файла, который я пытаюсь загрузить.

Может кто-нибудь указать мне правильное направление проблемы и как ее решить? Спасибо

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...