Question

我有一个网页，用户可以在其中上传图片，而我的python代码将对其进行一些调整并进行一些分析。我希望新生成的图像在生成后立即在网页上显示给用户，然后继续进行需要做的分析，然后使用该信息更新网页。但是，我不确定如何通过功能（一旦生成新图像）从烧瓶到网页进行通信（一旦生成新图像），网站就可以显示新生成的图像，因为只能在最后使用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调用将与此路由通信从烧瓶导入响应

@app.route('/analyze', methods=['GET', 'POST'])
    def analyze():
        # run some analysis
        return Response(status=200, response="Anlysis Done")

这是您的JavaScript代码的外观。您可以将其放置在模板的script标签中。如果将其放在单独的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 
        })
    })
})

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

1 个答案: