Question

我正在尝试从纯JavaScript客户端将svg，字符串和png一起放入Django REST api。

我目前陷入错误400 “上传有效的图像。您上传的文件不是图像或损坏的图像。” 来自后端的响应。

使用Pablo-svg-library创建png，该库将svg转换为png（带有“ toImage（）”）。

文件本身似乎没有损坏，可以使用python枕头加载（Django的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的管理模板上传相同的文件可以正常工作（尽管请求中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管理模板的请求的有效负载已编码。

Answer 1

我尝试放置的png用data uri scheme表示。我上面创建Blob的方式不正确。首先需要从数据uri中提取png的原始数据，然后才能将其与mimedata一起插入到Blob中。

如何正确完成此转换，已在此处回答：https://stackoverflow.com/a/5100158/570722

（我未在此处提供给定的代码示例，因为它将来可能会更改，并且此高度评价的答案很可能会被更新）。

我在上面还说过png正确地被Pillow加载了-但是我测试的png是通过开发者控制台的输出检索的。在那里，数据uri被浏览器转换为实际图像-总之，我从未测试过上传到后端的“图像”数据（仍然是数据uri），而是测试了已解码的png。 / p>

在香草javascript中使用XMLHttpRequest包含PNG的PUT多部分表单数据

1 个答案: