Flask：在继续功能的同时在网页上显示新生成的图像？

Question

我有一个网页，用户在其中上传图片，我的 Python 代码将对它进行一些调整并进行一些分析。我希望新生成的图像在生成后立即在网页上显示给用户，然后继续进行需要进行的分析，然后使用该信息更新网页。但是，我不确定如何在功能中途（一旦生成新图像）从flask到网页通信网站可以显示新生成的图像，因为使用render_template只能在功能结束时完成。我的python（烧瓶）代码如下：@app.route('/uploaded', methods=['GET', 'POST'])def upload_file():    if request.method == 'POST':            filename = secure_filename(file.filename)            f = request.files['file']            f.save(secure_filename(f.filename))            image = cv2.imread(filename)            im = Image.fromarray(image)            # make some adjustments to the image (not shown here) and then save it...            im.save(os.path.join(app.config['UPLOAD_FOLDER'], 'your_file.jpg'))            # after the new image is generated, display it on the website at {{ place_for_generated_image }}            # do some more analysis, then finally:            return render_template('index.html', analysis = analysis)HTML很简单：<form action = "http://localhost/uploaded" method = "POST"             enctype = "multipart/form-data">            <input type = "file" name = "file" class="form-control-file">            <input type = "submit" class="btn btn-info" value="Upload Image" button id="uploadfile" onclick="uploadfile()">            </form>            {{ place_for_generated_image }}            {{ analysis }}

Answer 1

您需要使用多个 ajax 调用来实现这一点。类似于以下内容：

首先制定处理图像上传的途径

@app.route('/uploaded', methods=['GET', 'POST'])

def upload_file():

    if request.method == 'POST':

            filename = secure_filename(file.filename)

            f = request.files['file']

            f.save(secure_filename(f.filename))

            image = cv2.imread(filename)

            im = Image.fromarray(image)

            # make some adjustments to the image (not shown here) and then save it...

            im.save(os.path.join(app.config['UPLOAD_FOLDER'], 'your_file.jpg'))

            # Here you need to convert your image to a base64 string and return that string to your ajax call

            # do some more analysis, then finally:

            return 'YOUR BASE64 ENCODED IMAGE STRING'

这条路线将处理您的分析。您的第二个嵌套 ajax 调用将与此路由从flask import Response 进行通信

@app.route('/analyze', methods=['GET', 'POST'])

    def analyze():

        # run some analysis

        return Response(status=200, response="Anlysis Done")

这就是您的 javascript 代码的样子。您可以将其放置在模板中的脚本标记中。如果你把它放在一个单独的 JS 文件中，一定要看看我在第二个 ajax 调用中对 url_for 的评论

$('form').submit(function(e){

    e.preventDefault();

    $.ajax({

        url: $(this).attr('action'),

        type: 'POST',

        data: $(this).serialize()

    }).done(function(res){

        // Here you write code that will display the returned base64 image 

        // from the upload_file route Just update your img tag src to the 

        // base64 string you received as the response

        // SECOND AJAX CALL TO RUN THE ANALYTICS 

        $.ajax({

            url: "{{url_for('analysis')}}", // if this JS code in a separate JS file you will have to declare a URL variable in a script tag in your template as {{url_for}} is only accessible from your template 

            type: 'POST',

            data: 'any data you want to send can be in JSON format' 

        }).done(function(res){

            // analysis is done 

        })

    })

})