使用Ajax request.files的Python Flask上传文件为空

时间:2018-07-22 16:23:12

标签: python flask file-upload

我正在尝试将大约1.62MB的图像上传到使用flask编写的端点。 request.files对象始终为空。我检查了以下问题,但没有运气:

这是我的服务器:

from flask import Flask, request, jsonify, render_template
import sys

app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = r"C:\Temp"
app.debug = True

@app.route("/demo-upload", methods=["GET", "POST"])
def ProcessImage():
    if request.method == "POST":
        print(request.files)
        try:
            if 'file' in request.files:
                with open("test-upload.png", "wb") as iFile:
                    print(request['file'])
                    iFile.write(request.files['file'])
        except Exception as e:
            print(e)
        return jsonify("Ok")

@app.route("/", methods=["GET"])
def DemoIndexPage():
    return render_template("index.html")

if __name__ == "__main__":
    app.run()

我的客户:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"
            integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
            crossorigin="anonymous"></script>
    <title>Demo</title>
</head>
<body>
    <h1 style="text-align: center">Status Demo</h1>
    <span>upload image to process.</span><br/>
        <form id="FileForm" name="file" enctype="multipart/form-data">
            <input type="file" name="file" id="File" />
            <input type="button" name="submit" value="submit" onclick="ProcessImage()" />
        </form>
    <p id="status" hidden>Success!</p>
    <script>
        function ProcessImage()
        {
            var form_data = new FormData($('#File')[0]);
            console.log(form_data)
            $.ajax({
                type: 'POST',
                url: '/demo-upload',
                data: form_data,
                contentType: false,
                cache: false,
                processData: false,
                async: false,
                success: function (data) {
                    console.log('Success!');
                    $("#status").show();
                },
            });
        }
    </script>
</body>
</html>

一切对我来说都很干净,我不知道我要去哪里。请求对象中的files属性始终为空。我还尝试过邮递员使用带有表单数据键=文件和值=上传文件的邮件头请求,以及标头content-type =“ multipart / form-data”。非常感谢任何帮助!

1 个答案:

答案 0 :(得分:1)

我做了一些更改并使其起作用:

首先,更改从javascript部分中读取数据的html元素:

var formDataRaw = $('#FileForm')[0];
var form_data = new FormData(formDataRaw);

第二,我尝试按以下方式获取上传的图像:(仅当您尝试上传到本地主机时才需要@cross_origin())

@app.route("/demo-upload", methods=["GET", "POST"])
@cross_origin()
def ProcessImage():
    if request.method == "POST":
        print(request.files)
        try:
            if 'file' in request.files:
                imageFile = request.files['file']
                savePath = "/somewhere/somewhere/something.png"
                imageFile.save(savePath)
        except Exception as e:
            print(e)
        return jsonify("Ok")