PUT multipart-formdata 包含 PNG 和 XMLHttpRequest 在 vanilla javascript答案

【问题标题】：PUT multipart-formdata containing PNG with XMLHttpRequest in vanilla javascriptPUT multipart-formdata 包含 PNG 和 XMLHttpRequest 在 vanilla javascript
【发布时间】：2019-06-18 14:13:33
【问题描述】：

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

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

png 是使用 Pablo-svg-library 创建的，它将 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 管理模板的请求有效负载是经过编码的。

【问题讨论】：

你试过了吗？ stackoverflow.com/questions/7606614/…
@Anatsu 是的，谢谢。通过 django 管理模板上传相同的 png 工作正常。因此，我假设它与我构建请求的方式有关。

标签： javascript django xmlhttprequest png

【解决方案1】：

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

这里已经回答了如何正确完成转换：https://stackoverflow.com/a/5100158/570722

（我没有在此处包含给定的代码示例，因为它可能会在未来发生变化，并且这个备受好评的答案更有可能被更新）。

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

【讨论】：