使用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('/')

图像打印为“None”，问题似乎出在我请求上载参数的行中。发布到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...
});