PUT multi-formdata, содержащий PNG с XMLHttpRequest в ванильном JavaScript

Question

Я пытаюсь положить svg, строку и png вместе в API REST Django из чистого клиента javascript.

В настоящее время я застрял с ошибкой 400 "Загрузить действительное изображение. Файл, который вы загрузили, не был ни изображением, ни поврежденным изображением. " ответ от бэкэнда.

png создается с помощью библиотеки Pablo-svg, которая преобразует svg в png (с помощью"toImage ()").

Сам файл не поврежден, его можно загрузить с подушкой python (которая также используется в ImageField Джанго).

var file = new Blob([svgData], { type: 'text/xml'});
var img = Pablo(document.getElementById('stage')).toImage('png', appendImgToFormAndSend);

function appendImgToFormAndSend() {
    var picture = new Blob([img[0].src], { type: 'image/png'});

    var xhr = new XMLHttpRequest();
    xhr.open("PUT", "http://myapi.local/upload_all_the_data");

    var formData = new FormData();
    formData.append('picture', picture, 'picture1.png')
    formData.append('rawdata', file, 'rawdata');
    formData.append('url', location.href);

    xhr.send(formData)
};

xhr.onload = function() {
                console.log("ANSWER");
                console.log(this.responseText);
                var data = JSON.parse(this.responseText);
                console.log(data)
            }

У меня здесь есть концептуальное недоразумение?

Загрузка идентичного файла через шаблон администратора Django работает нормально (хотя raw-данные png в запросе выглядят совершенно по-другому), поэтому я предполагаю, что ответ об ошибке вышевводит в заблуждение, и проблема связана с запросом / кодировкой / типом файла.

Полезная нагрузка из вышеприведенного js-кода выглядит следующим образом:

-----------------------------1331527982888194116440756954

Content-Disposition: form-data; name="picture"; filename="picture1.png"

Content-Type: image/png



data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAlgAAAGQCAYAA [snip]
-----------------------------1331527982888194116440756954

Content-Disposition: form-data; name="rawdata"; filename="rawdata"

Content-Type: text/xml



<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400">
<text x="193.17" y="104.88" font-size="30px" style="stroke: black; fill: rgb(111, 126, 14);">Hello World</text>
<rect x="128.24" y="135.89" width="89.22" height="14.74" style="stroke: black; fill: rgb(69, 214, 137);"></rect>
<circle cx="287.04" cy="166.81" r="44.18" style="stroke: black; fill: rgb(39, 203, 202);"></circle>
<circle cx="69.34" cy="41.28" r="56.59" style="stroke: black; fill: rgb(140, 165, 11);"></circle>
<text x="480.22" y="21.02" font-size="30px" style="stroke: black; fill: rgb(127, 87, 191);">Hello World</text>
</svg>

-----------------------------1331527982888194116440756954

Content-Disposition: form-data; name="url"



http://myurl:8080/svg_editor/index.html?pk=5978bc3a-a275-4114-94a5-f90063ba3641

-----------------------------1331527982888194116440756954--

Полезная нагрузка запроса из шаблона администратора Django в cКонтраст закодирован.

Answer 1

png, который я пытался PUT, представлен в виде data uri . То, как я создал BLOB-объект выше, неверно. Необработанные данные png сначала должны быть извлечены из данных uri, и только затем они могут быть вставлены в BLOB-объект вместе с mimedata.

Как это преобразование сделано должным образом, уже здесь ответили: https://stackoverflow.com/a/5100158/570722

(я не включаю приведенный здесь пример кода, так как он может измениться в будущем, и этот ответ с большим количеством голосов, скорее всего, будет обновлен).

Я также заявил выше, что png был правильно загружен с Pillow - однако png, который я тестировал, был получен через вывод консоли разработчика. Там данные URI были преобразованы браузером в реальное изображение - в заключение я никогда не проверял «image» -данные, которые были загружены в бэкэнд (который все еще был URI данных), но вместо этого я тестировал уже декодированный png.