使用Python Flask从cropit接收HTML帖子

Question

我是网络开发的新手，有一个小型的网络应用程序，我需要用户上传裁剪的图像。我的问题是我无法获取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>

这是处理post请求的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

根据this question的答案，你不能只是在传递文件时使用一个简单的对象作为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...
});