如何在 Flask 中接受通过 ajax 发送的 FormData？答案

【问题标题】：How to accept FormData sent via ajax in Flask?如何在 Flask 中接受通过 ajax 发送的 FormData？
【发布时间】：2017-02-26 18:02:50
【问题描述】：

我正在尝试使用 Ajax POST 请求在 FormData 中发送图像文件。我面临两个问题：

不知道怎么提取烧瓶部分的FormData
发出 ajax POST 请求时出现 500 内部服务器错误（不确定这是不是因为 1）

谢谢

烧瓶python代码：

@app.route('/', methods=['GET','POST'])
def upload_file():
if request.method == 'POST':
    file = request.files['file']
    if file: # and allowed_file(file.filename):
        filename = secure_filename(file.filename)
        file.save(os.path.join(os.getcwd()+"/static", "current_image.jpg"))
        return jsonify({'tasks': tasks})

HTML 和 Javascript 代码：

<input id="pictureInput" type=file name=file>
<input type=submit value=Upload id="button">

<script type="text/javascript">
var pictureInput = document.getElementById("pictureInput");
var myFormData = new FormData();
myFormData.append('pictureFile', pictureInput.files[0]);

$("#button").click(function(){
    console.log(pictureInput);
    console.log(pictureInput.files[0]);
    console.log(myFormData);

    $.ajax({
      url: "http://localhost:8000/",
      type: 'POST',
      processData: false, // important
      contentType: false, // important
      dataType : 'json',
      data: myFormData,
      success : function(data){
            console.log(data);
      },
    });
});
</script>

错误：

【问题讨论】：

添加那个 500 响应的 content 是什么？实际错误是什么？
对不起丹尼尔，我明白你的意思。我添加了使用 POSTMAN 得到的错误响应。
嗯，这与您最初显示的代码不同；错误发生在sys.stdout.write。
很抱歉。我试图调试它。现在，当使用原始代码时，我收到“错误请求 - 浏览器（或代理）发送了一个此服务器无法理解的请求。”
面临同样的问题。无法访问 Flask 中的 FormData。如果有人有解决方案，请告诉我。

标签： python ajax flask

【解决方案1】：

1.我不知道如何提取烧瓶部分的FormData

为了提取fomrdata，您可以编写以下代码

@app.route('/', methods=['GET','POST'])
def upload_file():
if request.method == 'POST':
    file = request.files['pictureFile'] # according to the name you append to formdata

2。发出 ajax POST 请求时出现 500 内部服务器错误（不确定这是不是因为 1）

实际上，如果找不到该文件，则没有正确的响应，因此将无法正常工作。

您可以参考以下示例代码

@app.route('/', methods=['GET','POST'])
def upload_file():
if request.method == 'POST':
    isSuccess = False
    if 'file' not in request.files:
         return jsonify({"IsSuccess" : isSuccess, "Message": "No file part"})

    file = request.files['pictureFile'] # according to the name you append to formdata

    if file: # and allowed_file(file.filename):
        filename = secure_filename(file.filename)
        file.save(os.path.join(os.getcwd(), "static", "current_image.jpg"))

        isSuccess = True
        tasks = [] 
        return jsonify({"IsSuccess" : isSuccess, "tasks": tasks})

 return jsonify({"IsSuccess" : isSuccess, "Message": "Error occurs"})

【讨论】：

【解决方案2】：

以下代码应该适合您。 您需要将static 文件夹与您的app.py 文件放在同一级别

app.py

import os
from flask import Flask, request, jsonify
from werkzeug.utils import secure_filename

app = Flask(__name__)


@app.route('/', methods=['GET','POST'])
def upload_file():
    if request.method == 'POST':
        file = request.files['file']
        if file:
            filename = secure_filename(file.filename)
            file.save(os.path.join(os.getcwd()+"/static", "current_image.jpg"))
            tasks = []
            return jsonify({'tasks': tasks})


if __name__ == "__main__":
    app.run(host='0.0.0.0', debug=True)

tasks 没有在上面的代码中定义，所以我只是将它初始化为一个空列表。您还需要确保 jQuery 已加载到您的模板中。

【讨论】：

嗨@ettanany 我正在关注同样的例子，但如果我尝试print(request.files) 我得到ImmutableMultiDict([]).. 知道为什么会这样吗？谢谢
@ettanany file = request.files['file'] 这段代码不起作用，因为请求中没有文件对象，有一个文件是其中一部分的FormData 对象。
这不是他在问题中要问的。