JQuery Ajax возвращает либо ошибку ERR_SPDY_PROTOCOL_ERROR, либо ERR_CONNECTION_RESET при загрузке большого файла - PullRequest
0 голосов
/ 26 июня 2019

Я получаю сообщение об ошибке ERR_SPDY_PROTOCOL_ERROR или ERR_CONNECTION_RESET, в зависимости от изображения, которое я выбираю для загрузки с использованием функции JQuery Ajax.

enter image description here

Данные изображенияпреобразуется в строку Base64, и эти ошибки возникают только при загрузке больших файлов.Я проверил это с небольшим файлом изображения, и он работает.

Иногда я также получаю ERR_BLOCKED_BY_CLIENT, который представляет собой AdBlocker, собирающий код в строке Base64. Получение ошибки "net :: ERR_BLOCKED_BY_CLIENT" на некоторых вызовах AJAX

Я отправляю данные изображения через Ajax, потому что не могу использовать SaveAS в DotNetNuke, так как вызываемый мной метод находится вотдельный класс контроллера в модуле DNN, и он теряет объект контроллера загрузки.

Эта функция преобразует ByteArray в строку Base64:

  function base64ArrayBuffer(arrayBuffer) {
  var base64    = ''
  var encodings = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'

  var bytes         = new Uint8Array(arrayBuffer)
  var byteLength    = bytes.byteLength
  var byteRemainder = byteLength % 3
  var mainLength    = byteLength - byteRemainder

  var a, b, c, d
  var chunk

  // Main loop deals with bytes in chunks of 3
  for (var i = 0; i < mainLength; i = i + 3) {
    // Combine the three bytes into a single integer
    chunk = (bytes[i] << 16) | (bytes[i + 1] << 8) | bytes[i + 2]

    // Use bitmasks to extract 6-bit segments from the triplet
    a = (chunk & 16515072) >> 18 // 16515072 = (2^6 - 1) << 18
    b = (chunk & 258048)   >> 12 // 258048   = (2^6 - 1) << 12
    c = (chunk & 4032)     >>  6 // 4032     = (2^6 - 1) << 6
    d = chunk & 63               // 63       = 2^6 - 1

    // Convert the raw binary segments to the appropriate ASCII encoding
    base64 += encodings[a] + encodings[b] + encodings[c] + encodings[d]
  }

  // Deal with the remaining bytes and padding
  if (byteRemainder == 1) {
    chunk = bytes[mainLength]

    a = (chunk & 252) >> 2 // 252 = (2^6 - 1) << 2

    // Set the 4 least significant bits to zero
    b = (chunk & 3)   << 4 // 3   = 2^2 - 1

    base64 += encodings[a] + encodings[b] + '=='
  } else if (byteRemainder == 2) {
    chunk = (bytes[mainLength] << 8) | bytes[mainLength + 1]

    a = (chunk & 64512) >> 10 // 64512 = (2^6 - 1) << 10
    b = (chunk & 1008)  >>  4 // 1008  = (2^6 - 1) << 4

    // Set the 2 least significant bits to zero
    c = (chunk & 15)    <<  2 // 15    = 2^4 - 1

    base64 += encodings[a] + encodings[b] + encodings[c] + '='
  }

  return base64
            }

Это код, который будетполучить данные байта изображения, используя JQuery и функцию Ajax:

$('.upload_btn').on("click", function (e) {
    e.preventDefault();

    if ($("#upload_control")[0].files.length === 0) {
        $.fancybox.open("<div class='nofileselected'><h2>No File Selected</h2><p>No file has been selected to upload.</p></div>");
    } else {
        var Filename = $("#upload_control")[0].files[0].name;
        var Maxuploadsize = "<%=ImageMaximumUploadSize%>";
        var Sizeoffile = $("#upload_control")[0].files[0].size;


        var fileList = document.getElementById("upload_control").files;
        var fileReader = new FileReader();
        if (fileReader && fileList && fileList.length) {
            fileReader.readAsArrayBuffer(fileList[0]);
            fileReader.onload = function () {
                var imageData = fileReader.result;
                var NewData = base64ArrayBuffer(imageData)                    
                uploadImageAjax(NewData);
            };
        }


        function uploadImageAjax(NewData){
            $.ajax({
                type: "POST",
                cache: false,
                processData: false,
                contentType: false,
                async: true,
                contentType: 'application/json',
                url: $.fn.GetBaseURL() + 'DesktopModules/ProductDetailedView/API/Upload/UploadImage?FileName=' + Filename + '&MaxUploadSize=' + Maxuploadsize + '&SizeOfFile=' + Sizeoffile + '&DataFile=' + NewData,
                success: function (data) {
                    alert("Upload Successfull");
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    console.log(xhr.responseText);
                }
            });
    }       

    }

});

Вот пример строкового кода NewData Base64:

enter image description here

В зависимости от изображения, которое я пытаюсь загрузить, я получаю одно из следующих ошибок:

net :: ERR_BLOCKED_BY_CLIENT enter image description here

net :: ERR_SPDY_PROTOCOL_ERROR enter image description here

net :: ERR_CONNECTION_RESET enter image description here

Я также увеличил максимальный размер загрузки на IIS: Ajax not postbase64 данные большого изображения

...