[flask框架]下：前端发起请求，服务器用[python]读取[本地图片]并转码[base64]，传至前端显示

最新推荐文章于 2023-06-28 16:52:43 发布

J_learner

最新推荐文章于 2023-06-28 16:52:43 发布

阅读量1.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Front End 文章标签： python ajax javascript jquery

本文链接：https://blog.youkuaiyun.com/J_learner/article/details/105681873

Front End 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何在Flask应用中，使用Python读取本地图片，转换为Base64编码，并通过AJAX请求响应给前端，利用jQuery和JavaScript在网页上显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端 jQuery + AJAX 请求

$.ajax({
    type : 'POST', // POST方法
    
    // 服务器所在，注意要与app.py中的
    // @app.route('/back_end', methods=['POST', 'GET'])
    // 中的第一个参数相对应
    url : '/back_end', 

    // 将data转换成JSON字符串（data为存储数据的变量的名）
    // 该文章中，这个传送给服务器的data并未被使用
    // 只是为了发起一个请求，得到服务器的反馈
    data : JSON.stringify(data), 
     
    // 发送给服务器的数据类型				
    contentType: 'application/json; charset=UTF-8', 

    // 规定预期的服务器响应的数据类型
    dataType : 'json', 
    
    // 请求成功后，接受服务器返回的数据，在参数img中（{'ok': s}）
    success : function(img) { 
        var picture = document.createElement('img'); // 创建一个img元素
        
        // 该img元素将会成为 id 为 pictureLocation 的 div 的孩子，需获取这个元素
        var d1 = document.getElementById('pictureLocation'); 

        // 设置这个img元素的一些属性
        // img元素的 src 尤为重要：
        // img.ok中存储的是图片的base64，且图片原先的格式是png；在 src 中均有体现
        picture.src = 'data:image/png;base64,' + img.ok;
        
        picture.alt = "";
        picture.width = d1.clientWidth;
        picture.height = d1.clientHeight;
        d1.appendChild(picture);
    },

    // 请求出错执行的函数
    error : function(xhr, type) {
        alert("ERROR!");
    }
});

服务器

from flask import Flask, request, jsonify
# app.py顶部要引入request, jsonify

@app.route('/back_end', methods=['POST', 'GET'])
def back_end():  # 获取前端数据，将图像base64反馈给前端
    import base64
    data = request.get_json() # data在本文中并未被使用
    # open的第一个参数为图片所在路径，第二个为读取的方式
    # 图像一般以二进制格式读取：rb
    with open('static/image1.png', 'rb') as img_f:
        img_stream = base64.b64encode(img_f.read())
        s = img_stream.decode()
    return jsonify({'ok': s}) # 返回JSON格式的数据