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

Question

我正在尝试使用Ajax POST请求将图像文件作为FormData发送。

我面临两个问题：

1. 我不知道如何在Flask部分提取FormData
2. 当进行Ajax POST请求时，我会遇到500内部服务器错误（不确定是否是因为问题1）

谢谢

Flask 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>

错误：

- matchifang

---

那个500响应的内容是什么？实际错误是什么？ - Daniel Roseman

抱歉，丹尼尔，我刚刚明白你的意思。我已经添加了我在POSTMAN中收到的错误响应。 - matchifang

那是不同于你最初展示的代码；错误发生在 sys.stdout.write 上。 - Daniel Roseman

抱歉，我正在尝试调试它。现在，当使用原始代码时，我收到了“错误请求 - 浏览器（或代理）发送了一个服务器无法理解的请求。” - matchifang

面临相同的问题。无法在Flask中访问FormData。如果有人有解决方案，请告诉我。 - Anurag

Answer 1

以下代码应该适用于您。您需要将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

---

嗨@ettanany，我正在按照相同的示例进行操作，但是如果我尝试print(request.files)，我会得到ImmutableMultiDict([])。你有任何想法为什么会发生这种情况吗？谢谢。 - crash

@ettanany 这段代码无法工作，因为请求中没有一个名为 "files" 的对象，而是有一个 FormData 对象，其中文件是其中的一部分。 - Craicerjack

这不是他在问题中所问的。 - Anurag

Answer 2

1. 我不知道如何在 Flask 中提取 FormData

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

@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"})

- Epic Chen