使用 Python Flask 从cropit 接收 HTML 帖子答案

【问题标题】：Receiving HTML post from cropit with Python Flask使用 Python Flask 从cropit 接收 HTML 帖子
【发布时间】：2018-01-02 02:28:08
【问题描述】：

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

我的 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 和一个很长的字符串。所以看起来它发布正确。

任何提示将不胜感激

【问题讨论】：

标签： javascript jquery python post flask

【解决方案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...
});

【讨论】：