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上工作。

相关代码：

非工作瓶：

@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: multipart/form-data; boundary=----WebKitFormBoundaryLiIs2nrWOjrabtB1

这是已中断请求的Content-Type：Content-Type: multipart/form-data

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

我删除了该行，现在可以正常使用了。

Flask AJAX请求返回空的ImmutableMultiDict，相同的AJAX与http.server一起使用

1 个答案: