Flask中render_template页面不更新：文件上传生成图片后页面未刷新

我实现了文件上传、生成图片后展示的功能，后端返回了正确的状态码：

"POST /result HTTP/1.1" 302 -
"GET /display_image/census_2009b.png HTTP/1.1" 200 -

但执行redirect后页面并未刷新跳转。

相关代码 #

Flask后端代码 #

from flask import Flask, request, render_template, send_file, redirect, url_for

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/result', methods=['GET', 'POST'])
def upload_file():
    file = request.files['file']
    ### 生成并保存图片至`filename`...

    return redirect(url_for('display_image', filename=filename))

@app.route('/display_image/<filename>', methods=['GET', 'POST'])
def display_image(filename):
    image_url = url_for('static', filename=filename)
    return render_template('display_image.html', image_url=image_url)

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

index.html代码 #

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>
        <link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />
    </head>
    <body>
        <form action="/result" method="get" class="dropzone" id="my-dropzone"></form>
    </body>
</html>

display_image.html代码 #

<!DOCTYPE html>
<html>
<head>
    <title>Uploaded Image</title>
</head>
<body>
    <img src="{{ image_url }}" alt="Uploaded image">
</body>
</html>

问题原因 #

Dropzone默认采用AJAX异步方式上传文件，它会拦截表单的默认提交行为，并且不会自动处理后端返回的302重定向响应。虽然后台已经完成了重定向对应的请求，但浏览器页面不会触发跳转刷新。

另外注意：表单method设为get不符合文件上传的规范，文件上传必须用post，这也是一个潜在问题。

解决方案 #

方案1：关闭Dropzone的自动AJAX处理，恢复表单默认提交 #

修改index.html，添加Dropzone配置，禁用自动异步处理，让表单以传统方式提交：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>
        <link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />
        <script>
            Dropzone.options.myDropzone = {
                autoProcessQueue: false,
                init: function() {
                    // 添加上传按钮
                    var submitBtn = document.createElement("button");
                    submitBtn.textContent = "确认上传";
                    this.element.appendChild(submitBtn);
                    
                    var dropzone = this;
                    submitBtn.addEventListener("click", function() {
                        dropzone.processQueue();
                    });
                    
                    // 禁用AJAX，触发表单默认提交
                    this.on("sending", function(file, xhr, formData) {
                        this.element.submit();
                        return false; // 阻止Dropzone的异步请求
                    });
                }
            };
        </script>
    </head>
    <body>
        <!-- 修正method为POST，添加enctype属性 -->
        <form action="/result" method="POST" class="dropzone" id="my-dropzone" enctype="multipart/form-data"></form>
    </body>
</html>

方案2：在Dropzone成功回调中手动跳转页面 #

保持AJAX上传逻辑，在上传完成后通过JS手动触发页面跳转：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>
        <link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />
        <script>
            Dropzone.options.myDropzone = {
                url: "/result",
                method: "POST",
                success: function(file, response) {
                    // 这里直接跳转至图片展示页，可根据后端返回的filename动态拼接
                    window.location.href = `/display_image/${response.filename}`;
                }
            };
        </script>
    </head>
    <body>
        <form class="dropzone" id="my-dropzone" enctype="multipart/form-data"></form>
    </body>
</html>

同时需要修改后端接口，返回包含filename的JSON数据而非重定向：

from flask import jsonify

@app.route('/result', methods=['POST'])
def upload_file():
    file = request.files['file']
    ### 生成并保存图片至`filename`...

    return jsonify({"filename": filename})

内容的提问来源于stack exchange，提问作者alex