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():&nbsp; &nbsp; if request.method == 'POST':&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; filename = secure_filename(file.filename)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; f = request.files['file']&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; f.save(secure_filename(f.filename))&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; image = cv2.imread(filename)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; im = Image.fromarray(image)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; # make some adjustments to the image (not shown here) and then save it...&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; im.save(os.path.join(app.config['UPLOAD_FOLDER'], 'your_file.jpg'))&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; # Here you need to convert your image to a base64 string and return that string to your ajax call&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; # do some more analysis, then finally:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return 'YOUR BASE64 ENCODED IMAGE STRING'这条路线将处理您的分析。您的第二个嵌套 ajax 调用将与此路由从flask import Response 进行通信@app.route('/analyze', methods=['GET', 'POST'])&nbsp; &nbsp; def analyze():&nbsp; &nbsp; &nbsp; &nbsp; # run some analysis&nbsp; &nbsp; &nbsp; &nbsp; return Response(status=200, response="Anlysis Done")这就是您的 javascript 代码的样子。您可以将其放置在模板中的脚本标记中。如果你把它放在一个单独的 JS 文件中，一定要看看我在第二个 ajax 调用中对 url_for 的评论$('form').submit(function(e){&nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; url: $(this).attr('action'),&nbsp; &nbsp; &nbsp; &nbsp; type: 'POST',&nbsp; &nbsp; &nbsp; &nbsp; data: $(this).serialize()&nbsp; &nbsp; }).done(function(res){&nbsp; &nbsp; &nbsp; &nbsp; // Here you write code that will display the returned base64 image&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; // from the upload_file route Just update your img tag src to the&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; // base64 string you received as the response&nbsp; &nbsp; &nbsp; &nbsp; // SECOND AJAX CALL TO RUN THE ANALYTICS&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 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&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: 'POST',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: 'any data you want to send can be in JSON format'&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; }).done(function(res){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // analysis is done&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; })})