Правильный тип контента для отправки этих данных AJAX Post

У меня возникли проблемы с отправкой данных изображения base64 с использованием сообщения ajax. Я думаю, что у меня неправильное значение для Content-Type, но я пробовал application/json, text/json и image/jpeg безуспешно

Javascript

  function sendFormData(fD)
    {
        var urls = fD.get('urls');
        console.log('urls', urls);

        var xhr = new XMLHttpRequest();
        xhr.open('POST', '/editsongs.update_artwork');
        alert(urls);
        xhr.setRequestHeader("Content-type", "image/jpeg");
        xhr.send(urls);
    }

Консоль браузера показывает

["data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxMTEhUTExMWFhUXGRgbGBgXGR0aGRgXHRgYFx4YGxkYHiogGh4lGxgdIjEhJSkrLi4uGh8zODMtNygtLisBCgoKDg0OGhAQGy0lHSUtLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLf/AABEIANEA8QMBIgACEQEDEQH/xAAcAAACAgMBAQAAAAAAAAAAAAAEBQMGAAECBwj/xABGEAACAQIEBAQDBAUJCAIDAAABAhEDIQAEEjEFIkFREzJhcQaBkRRCobEjUsHh8AcVM2JygsLR8RZDRFNzg5KyJDSzw8T/xAAZAQADAQEBAAAAAAAAAAAAAAABAgMABAX/xAAqEQACAgEDBQACAQQDAAAAAAAAAQIRAxIhMQQTFEFRImGRYnGh8AUjMv/aAAwDAQACEQMRAD8AsoosJt9cSpSdeYKYEXxKlQs4E2kEx6dMWJFBEDr0OPey5nCrR58MalwJUpB1nENbJWthpTyQDG5H5Y0gGqNQOJLLXA7h9K9VypGITSPbD+tSGIFy4mSJx0xz7EXjE7UscacNamW30jAlbLsNxiscqZNwoCK4wDEzJjkLiuoQjGNEYnCY5ZcawkMY5bEkY5GGsUijG1XtjcYPyFAQWMbbdsac9Ks0Y2wQphlwTKLUZg2wAwFmq8m5HYY5HFTRph0VnBI1QDZZgsZGwEnHPmn/ANb+lMcVqLFWRafKMTU+L6bRb88V/LcY+0otQKVmbdcbq1wsSYkgDfc7C3fHIoRlDVIs5tSpFzyXEtcdCdvlhopwp4RSpwvcAf64bj0x5mbSpUjrhdbmicSU1xi08djEWylGRjRGOsC5uodl379sBK2F8HbMAJxUON5lqrQFMA4f1CVU62ke2FaZlWqXgAbepx29MtD1VZzZXaol4RwYKsuAWP4…

Код Java-сервера

public String updateArtwork(Request request, Response response)
    {
        System.out.println("Received artwork");

        for(String s:request.queryParams())
        {
            System.out.println("---"+s);
        }
        System.out.println("ReadParms");
        return "";
    }

просто выводит

Received artwork
ReadParms

Обновлено для отправки в виде формы

// Once we got everything, time to retrieve our objects
function sendData()
{
    var fD = new FormData();

    // send Files data directly
    var files = imgList.filter(
        function isFile(obj)
        {
            return obj.type === 'file';
        }
    );

    files.forEach(
        function appendToFD(obj)
        {
            fD.append('files[]', obj.file);
        }
    );

    // for elems, we will need to grab the data from the server
    var elems = imgList.filter(
        function isElem(obj)
        {
            return obj.type === "element";
        }
    );

    var urls = elems.map(
        function grabURL(obj)
        {
            return obj.element.src;
        }
    );

    if (urls.length)
        fD.append('urls', JSON.stringify(urls));

    sendFormData(fD);
};

    function sendFormData(fD)
    {
        // but here we will just log the formData's content
        var files = fD.getAll('files[]');
        console.log('files: ', files);
        var urls = fD.get('urls');
        console.log('urls', urls);

        var xhr = new XMLHttpRequest();
        xhr.open('POST', '/editsongs.update_artwork');
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhr.send(fD);
    }

тогда на сервере у меня есть

 public String updateArtwork(Request request, Response response)
    {
        System.out.println("Received artwork");

        for(String s:request.queryParams())
        {
            System.out.println("***"+s);
            System.out.println(request.queryParams(s));
        }
        System.out.println("ReadParms");
        return "";
    }

и его результаты

    Received artwork
    ***-----------------------------330219842643
    Content-Disposition: form-data; name
    "urls"

    ["data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxMSEhUSExIWFhUXFxgXGBcYFRgXFxkdGBcWGBgYFx0YHSggHR0lHRkYITEhJSkrLi4uFyA1ODMtNygtLisBCgoKDg0OFQ8PFSsZFRkrLSstLSstKysrLS03KystLSstKy03LSstLSstNzc3KysrLS0tKysrKysrKysrKysrK//AABEIAKoBKQMBIgACEQEDEQH...."]
    -----------------------------330219842643--

ReadParms

Итак, теперь я получаю данные, но я действительно не понимаю, как анализировать часть Content-Disposition в Java.

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

Обновление 2 Пытался просто отправить первый URL-адрес, а не данные формы или набор URL-адресов, потому что на самом деле существует только один URL-адрес. Но это просто не работает, сервер ничего не получил?

function sendFormData(urls)
{
    console.log('urls', urls[0]);
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/editsongs.update_artwork');
    xhr.setRequestHeader("Content-type", "text/json");
    alert(JSON.stringify(urls[0]));
    xhr.send(JSON.stringify(urls[0]));
}

person Paul Taylor    schedule 16.03.2018    source источник
comment
понятия не имею, что делает fD.get, но это данные формы? Это больше одного изображения?   -  person epascarello    schedule 16.03.2018
comment
stackoverflow.com/questions/34779799/   -  person Teemu    schedule 16.03.2018
comment
epascarello да, это был объект FormData, но данные не были извлечены из FormData с помощью моего кода   -  person Paul Taylor    schedule 16.03.2018
comment
Не объясняет, почему это не работает. Это небольшое изображение, поэтому я не понимаю, почему оно не работает.   -  person Paul Taylor    schedule 16.03.2018
comment
Я не знаком с тем, что вы делаете на стороне сервера, но похоже, что вы пытаетесь получить тело запроса с помощью queryParams(), который получит параметры запроса в URL-адресе. Это также объясняет, почему во втором примере он усечен, URL-адреса могут быть только такими длинными. Выясните, как читать из тела (getReader()?), используя ваш первый метод, и таким образом получите строку Base64.   -  person Clint    schedule 19.03.2018
comment
@Клинт, я думаю, вы попали в точку .... Очевидно, цикл не работает, и я думаю, причина в том, что вы сказали   -  person messerbill    schedule 19.03.2018
comment
@Clint, извините, вывод вводит в заблуждение, он не усечен, я добавил точки, поэтому вопрос SO не такой большой. Но я не знаю, как парсить Content-Disporttiion.   -  person Paul Taylor    schedule 19.03.2018
comment
Я попытался еще раз, просто передав простой json, но он просто ничего не получил на стороне сервера. Я снова обновлю вопрос, потому что это был бы мой предпочтительный способ сделать это.   -  person Paul Taylor    schedule 19.03.2018
comment
@PaulTaylor Смотрите мой комментарий выше на queryParams(). Вы пытаетесь получить данные неправильно. Узнайте, как считывать данные с тела. Также не обращайте внимания на мой комментарий об усечении, данные формы также хранятся в теле, и, как вы сказали, вы сами добавили точки. Здесь просто попытка в темноте, но попробуйте body() вместо queryParams()   -  person Clint    schedule 19.03.2018
comment
@Clint, спасибо, вы правы, использование body() действительно дает мне данные. Но я больше запутался, чем когда-либо, так как у меня есть несколько регулярных почтовых запросов, которые отправляют данные формы, и в этих случаях использование queryParams() работает?   -  person Paul Taylor    schedule 19.03.2018
comment
Да, Spark-framework -ok, это звучит правильно, хотя он не полностью отвечает, поскольку, когда я отправлял приложение типа Form-Data и Content/x-www-form-urlencoded, он не возвращал данные так хорошо, как в реальной форме. Опубликовать, но, возможно, это не имеет значения, так как я все равно не хотел отправлять форму.   -  person Paul Taylor    schedule 19.03.2018


Ответы (1)


Вы пытаетесь просмотреть данные в теле с помощью queryParams(), что даст вам параметры запроса, расположенные в URL-адресе.

Загрузите данные из тела запроса, используя body().

person Clint    schedule 19.03.2018