将 Python 请求转换为带有图像的 Javascript XMLHttpRequest答案

【问题标题】：Convert Python request to Javascript XMLHttpRequest with Images将 Python 请求转换为带有图像的 Javascript XMLHttpRequest
【发布时间】：2018-03-26 11:37:34
【问题描述】：

我有一个 Python 代码可以很好地 POST 到 API 端点：

msg = {}
msg['id'] = 1

d = {}
d['message'] = msg

f = {}
f['image'] = "<binary image data>"
f['thumb'] = "<binary image data>"

r = requests.post('/api/url', data=d, files=f)

但是，当我将其转换为 Javascript XMLHttpRequest 时，它无法正常工作。

这是我的代码：

var msg = {
   "id": 1
};

var d = {
   "message": msg
}

var formData = new FormData();
formData.append("message", JSON.stringify(d));
formData.append("image", "<binary image data>");
formData.append("thumb", "<binary image data>");

var xhr = new XMLHttpRequest();
xhr.open("POST", "/api/url", true);
xhr.send(formData);

输出

XHR 成功，状态码为 200 但id 错误，image 为空。

有什么想法吗？

【问题讨论】：

你以不同的方式转换数据，在python中f是结构而在js中不是。
@nullqube，你有什么建议？
developer.mozilla.org/en-US/docs/Web/API/FormData/…
@nullqube，感谢分享。这就是我正在做的事情。基本上我想知道的是在 Python 中它有键：data 和 files。那么这将如何在 Javascript 中发挥作用呢？
你的服务器端如何处理？

标签： javascript python xmlhttprequest

【解决方案1】：

我通过将二进制数据转换为Uint8Array 然后使用Blob 来让它工作

var msg = {
   "id": 1
};

var formData = new FormData();
var imgUint8Array = new Uint8Array("<binary image data>");
var thumbUint8Array = new Uint8Array("<binary image data>");

formData.append("message", JSON.stringify(msg));
formData.append("image", new Blob([ imgUint8Array ], {type: "image/jpg"}));
formData.append("thumb", new Blob([ thumbUint8Array ], {type: "image/jpg"}));

// ... XHR POST functions

【讨论】：