Почему мой буфер массива пуст на стороне сервера?

У меня есть метод в JavaScript для чтения из двоичного файла в ArrayBuffer и отправки его в метод POST Джерси:

function readAndSendBytes() {
    var file = document.getElementById("entityFileField").files[0],
        reader = new FileReader();
    var entityBytes = reader.readAsArrayBuffer(file);

    reader.onloadend = function () {
        alert(reader.result);
    }

    var xhr = new XMLHttpRequest();
    var url = "/api/upload/e2j";
    xhr.open("POST", url, true);
    xhr.setRequestHeader("Content-type", "application/octet-stream");
    xhr.responseType = "json";

    xhr.onload = function (e) {
        var response = xhr.response;
        alert(response);
    }

    xhr.send(reader.result);
}

Джерси:

@Path("/upload")
public class ParserHandler {
    @POST
    @Path("/e2j")
    @Consumes(MediaType.APPLICATION_OCTET_STREAM)
    @Produces(MediaType.APPLICATION_JSON)
    public String entityToJsonTwoElectricBoogaloo(byte[] entityPayload) {
        System.out.println(entityPayload.length);
}

Всякий раз, когда я печатаю длину на консоли, она всегда равна 0, тогда как она должна быть 439. Что я делаю не так?

что печатает console.info(reader.result);?

luk2302 11.10.2018 12:17

Только содержимое загруженного файла. Это было просто, чтобы проверить, правильно ли загружается файл.

notfreshprince 11.10.2018 12:24
Поведение ключевого слова "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
2
252
2

Ответы 2

Нашел решение! Просто переместил все, кроме отправки и инициализации файла и FileReader, в функцию xhr.onload!

Обновлено: Забыл опубликовать свое решение.

function postEntity() {
    var output = document.getElementById("response");
    var file = document.getElementById("entityFileField").files[0];
    var jsonResponse;

    var r = new FileReader();
    r.onloadend = function(e) {
        var data = r.result;

        var xhr = new XMLHttpRequest();
        var url = "/api/upload/entitytojson";
        xhr.open("POST", url, true);
        xhr.setRequestHeader("Content-type", "application/octet-stream");
        xhr.responseType = "json";

        xhr.onload = function (e) {
            if (xhr.response != null) {
                jsonResponse = JSON.stringify(xhr.response);
                output.innerHTML = jsonResponse;
            }
            else {
                alert("Invalid Entity File");
            }
        }

        xhr.send(data);
    }

    r.readAsBinaryString(file);
}

нет необходимости использовать файловый ридер, вы можете просто отправить blob с помощью xhr

function sendFile() {
  var file = document.getElementById("entityFileField").files[0];
  var xhr = new XMLHttpRequest();
  var url = "/api/upload/e2j";
  xhr.open("POST", url);
  xhr.setRequestHeader("Content-type", "application/octet-stream");
  xhr.responseType = "json";

  xhr.onload = function (e) {
    var response = xhr.response;
    alert(response);
  }

  xhr.send(file);
}

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