将带图片的Python requests POST请求转为XMLHttpRequest遇问题求助

你的Python和JS代码之间的核心问题在于表单数据格式不匹配，以及文件数据的错误处理，我来帮你逐一解决：

1. 表单数据格式差异 #

在Python代码中，requests.post的data=d参数会把嵌套字典{"message": {"id":1}}自动编码成application/x-www-form-urlencoded格式，最终提交的表单数据是类似message[id]=1这样的键值对。但你的JS代码把整个d对象转成JSON字符串后作为message字段的值，后端拿到的是一个完整的JSON字符串（比如"{\"message\":{\"id\":1}}"），这和Python提交的数据结构完全不同，导致后端无法正确解析。

2. 文件数据处理错误 #

JS中你用字符串"<binary image data>"表示二进制文件，但FormData上传文件时必须传入Blob或File对象（比如从文件选择器获取的文件，或者手动构造的Blob），字符串无法被识别为有效的二进制文件内容。

修正后的JS代码（匹配Python原代码的提交格式） #

下面的代码会完全模拟Python代码的请求格式，确保后端能正确解析：

// 构造message对应的表单数据（模拟Python的嵌套字典编码）
const msg = { id: 1 };
const formData = new FormData();
// 把嵌套对象拆成带括号的表单键，对应Python的message[id]=1
formData.append("message[id]", msg.id);

// 处理文件：这里假设你从文件选择器获取文件，替换成你的实际文件来源
// 示例：从<input type="file" name="image">获取图片文件
const imageFile = document.querySelector('input[type="file"][name="image"]').files[0];
const thumbFile = document.querySelector('input[type="file"][name="thumb"]').files[0];

// 将文件添加到FormData
formData.append("image", imageFile);
formData.append("thumb", thumbFile);

// 发送XMLHttpRequest请求
const xhr = new XMLHttpRequest();
xhr.open("POST", "/api/url", true);

xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log("请求成功:", xhr.responseText);
  } else {
    console.error("请求失败:", xhr.statusText);
  }
};

xhr.onerror = function() {
  console.error("请求发生网络错误");
};

xhr.send(formData);

备选方案：如果后端期望message是JSON字符串 #

如果你的Python代码其实是想把message作为JSON字符串提交（可能原Python代码的写法有误），那需要调整Python和JS代码保持一致：

修正后的Python代码

import requests
import json

msg = {"id": 1}
# 把message转成JSON字符串后再放入data
d = {"message": json.dumps(msg)}
f = {"image": open("your-image.jpg", "rb"), "thumb": open("your-thumb.jpg", "rb")}
r = requests.post('/api/url', data=d, files=f)

对应的JS代码

const msg = { id: 1 };
const formData = new FormData();
// 把message转成JSON字符串
formData.append("message", JSON.stringify(msg));

// 添加文件（同样需要Blob/File对象）
const imageFile = document.querySelector('input[type="file"][name="image"]').files[0];
const thumbFile = document.querySelector('input[type="file"][name="thumb"]').files[0];
formData.append("image", imageFile);
formData.append("thumb", thumbFile);

// 发送请求
const xhr = new XMLHttpRequest();
xhr.open("POST", "/api/url", true);

xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log("请求成功:", xhr.responseText);
  } else {
    console.error("请求失败:", xhr.statusText);
  }
};

xhr.send(formData);

额外提示 #

• 如果你的后端是Flask/Django这类Python框架：
  • 第一种方案（嵌套表单键）可以通过request.form["message[id]"]获取id值；
  • 第二种方案（JSON字符串）需要用json.loads(request.form["message"])解析出原始对象。
• 如果你是手动构造二进制Blob（比如从base64转换），可以用new Blob([binaryData], { type: "image/jpeg" })来创建Blob对象，再添加到FormData中。

内容的提问来源于stack exchange，提问作者Joseph D.