如何使用Ajaxrequest.file空文件上传Python flask文件?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (399)

我正试图上传一个大约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>

在我看来,一切看起来都很干净,我也不知道哪里出错了。请求对象中的文件属性总是空的。我也尝试过使用POST请求与表单数据键=file和value=上载一个文件,和一个标题内容-type=“MultiPart/Form-data”。

提问于
用户回答回答于

我现在也遇到这个问题了,能请教下你当初是怎么解决的吗?

用户回答回答于

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

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

第二,我试图获得上传的图像如下:(@Cross)_只有当您试图上载到本地主机时,才需要Oriue()

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

扫码关注云+社区

领取腾讯云代金券