javascript - Flask AJAX 请求返回空 ImmutableMultiDict，相同的 AJAX 适用于 http.server

Question

我正在从 http.server 过渡到 Flask。我使用 AJAX 上传图像现在已损坏。这正在运行 Python 3。

无效的故障排除:

• 我已在 Ajax 请求中包含 multipart/form-data。

• 我尝试过使用共享和专用的上传路线。

• 我添加了 @cross_origin() 它解决了类似问题的问题。

• 我尝试查看其他请求字典，没有任何内容。

• 我最初在 0.0.0.0 上运行该应用程序，因此将其更改为 127.0.0.1。

• 我尝试将整个表单添加到 FormData 中，仅添加图像。我不愿意对 Ajax 进行更多更改，因为它可以在 http.server 上运行。

• 尝试了同步和异步 AJAX 请求。

无论我尝试什么，我总是得到相同的结果:

print(request.files) 返回 ImmutableMultiDict([])

我宁愿避免使用 JQuery，因为它应该可以工作，因为它可以在 http.server 上工作。

相关代码:

非工作 flask :

@app.route("/qr_upload", methods=["GET", "POST"])
@cross_origin()
def receive_image():
  if (request.method == "POST"):
    print("qr_code" in request.files)  # This always returns False.
    multipart_data = request.files["qr_code"]

  return "Post"


if __name__ == "__main__":
  app.run("127.0.0.1", PORT, True)

在 http.server 上使用 AJAX

    // Add the image to the request and send it.
    var formData = new FormData(document.getElementById("qrPickerForm"))

    xhttp.open("POST", "/qr_upload")
    xhttp.setRequestHeader("Content-Type", "multipart/form-data")
    xhttp.send(formData)

相关 HTML

<form action = "/qr_upload" id = "qrPickerForm" name = "qr_form" method="post" enctype = "multipart/form-data">
    <input id = "qrFilePicker" name = "qr_code" type = "file" accept="image/*" capture="camera">
    <input type="submit">
</form>

工作中的http.server:

 def do_POST(self):
    # Extract the multiform data from the POST request
    cLen = int(self.headers["Content-Length"])
    body = self.rfile.read(cLen)

    # Decode the multiform data and get the image bytes.
    multipart_data = decoder.MultipartDecoder(body, "multipart/form-data; boundary=WebKitFormBoundary")

    # This and Flask's code should have the same data here.

Handler = S
with socketserver.TCPServer(("", PORT-1), Handler) as httpd:
  httpd.serve_forever()

更新 1:

如果我使用表单的提交按钮发送图像，而不是使用 AJAX，则它可以工作。不过还没弄清楚为什么。

Answer 1

我在 Wireshark 中进行了一些研究，因为它在一个 HTTP 服务器上工作但在另一个 HTTP 服务器上工作对我来说似乎很奇怪。

这是对 http.server 的请求的 Content-Type，当使用提交按钮时:内容类型:多部分/表单数据；边界=----WebKitFormBoundaryLiIs2nrWOjrabtB1

这是损坏请求的内容类型:内容类型:multipart/form-data

因此，直接使用 xhttp.setRequestHeader("Content-Type", "multipart/form-data") 设置 Content-Type 似乎是一个坏主意，大概是因为它会覆盖 enctype设置在 中，但没有边界。

我删除了该行，现在它可以按预期工作。