Question

我尝试通过调用jQuery的ajax（）方法将图像上传到flask应用程序中。它工作正常，文件大小低于允许的最大文件大小。当文件大于允许时，flask产生413（实体太大）错误，但$ .ajax（）在这种情况下不会触发任何事件：Safari的调试器显示正在执行请求。

这是我的ajax电话：

var formData = new FormData($('#upload-form')[0]);

$.ajax({
    type: 'POST',
    url: "/upload_handler/",
    data: formData,
    contentType: false,
    processData: false,
    cache: false,
    dataType: 'json',
    success:function(data, textStatus, jqXHR){
        console.log(data);
        $('#upload-form')[0].reset();
    },
    error: function(data){
        console.log(data);
        alert('error!');
    }
});

由于先前拒绝了请求，因此未调用Flask的处理程序。

同样，ajax无法处理错误，成功处理成功。我使用的是Safari 9，jQuery 2.4.1和Flask 0.10.1。

这是最小的工作示例：

app.py：

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

app = Flask(__name__)

app.config['MAX_CONTENT_LENGTH'] = 32 * 1024


@app.route('/upload/', methods=['POST'])
def upload_handler():
    if 'image' in request.files:
        img = request.files['image']
        return jsonify(name=img.filename, size=0)
    return jsonify(name='no', size=0)


@app.route('/')
def hello_world():
    return render_template('index.html', now=datetime.datetime.now())


if __name__ == '__main__':
    app.run(debug=True)

的index.html：

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    </head>
    <body>
        <form id="uploadform" method="POST" action="{{      url_for('upload_handler') }}">
            <input type="file" name="image" >
            <button type="button" id="submit">Upload</button>

            <p>Result Filename:&nbsp;<span id="resultFilename"> here</span></p>
            <p>Result Filesize:&nbsp;<span id="resultFilesize">here</span></p>

            {{ now }}
        </form>

        <script>
        $(function() {
            $('#submit').click(function() {
                event.preventDefault();
                var form_data = new FormData($('#uploadform')[0]);
                $.ajax({
                    type: 'POST',
                    url: "{{ url_for('upload_handler') }}",
                    data: form_data,
                    contentType: false,
                    processData: false,
                    dataType: 'json'
                }).done(function(data, textStatus, jqXHR){
                    console.log(data);
                    console.log(textStatus);
                    console.log(jqXHR);
                    console.log('Success!');
                    $("#resultFilename").text(data['name']);
                    $("#resultFilesize").text(data['size']);
                    $('#uploadform')[0].reset();
                }).fail(function(data){
                    console.log(data);
                    alert('error!');
                });
            });
        });
    </script>

   </body>
   </html>

如果试图上传小于32K的文件，它将显示文件的名称，如果一个人试图上传大文件而不会发生任何事情，但是烧瓶会输出413代码的日志消息。

Answer 1

尝试将statusCode添加到$.ajax()设置或$.ajaxSetup()以确定错误响应是否返回413状态代码

$.ajaxSetup({
  statusCode: {
    413: function(jqxhr, textStatus, errorThrown) {
           console.log(textStatus, errorThrown)
    }
  }
})

没有调用JQuery ajax错误处理程序

1 个答案: