使用Python Flask从Cropit接收HTML发布

Question

我是Web开发的新手，并且有一个小型Web应用程序，需要用户上传裁剪后的图像。 我的问题是我无法获取jQuery post请求中发送的图像。

我的Javascript和HTML如下所示：

 function sendImage(imageData) { var info = {} info.upload = imageData info.gender = gender.value info.ageGroup = ageGroup.value $.ajax({ type: "POST", url: "/uploadToS3", data: info, enctype: 'multipart/form-data', dataType: "json", success: console.log("image written") }); } 

  <div class="image-editor"> <input type="file" class="cropit-image-input"> <div class="cropit-preview"></div> <div class="image-size-label"> Resize image </div> <input type="range" class="cropit-image-zoom-input"> <button class="export">Export</button> </div> 

这是处理发布请求的python代码

@app.route('/uploadToS3', methods = ['POST'])
def uploadToS3():
    username = session.get('username')
    image = request.files.get('upload')
    gender = request.form['gender']
    ageGroup = request.form['ageGroup']
    fileName = getNewFileName()
    print(image)
    return redirect('/')

图片打印为“无”，问题似乎出在我请求上载参数的行中。 要发布到Flask的数据（从表单数据中获取）是upload：data：image / png; base64和一个很长的字符串。 因此，它看起来像正确发布。

任何提示将不胜感激

Answer 1

根据该问题的答案，您不能仅在传递文件时将简单的对象用作data 。

为此，您必须执行以下操作：

var formData = new FormData();
formData.append("gender",gender.value); // And so on...
formData.append("upload",$("#file")[0].files[0]); // When your file input has id="file"

$.ajax({
  type: "POST",
  url: "/uploadToS3",
  data: formData,
  enctype: 'multipart/form-data',
  // And so on...
});