跨Flask实例无磁盘存储传输并展示上传图片的技术问询

问题背景 #

本地运行两个Flask实例：

• frontend（端口5000）：接收用户表单上传的图片，不落地磁盘直接转发
• display（端口5001）：接收图片并展示给用户

尝试过base64编码传JSON、直接用requests的files参数，但均出现图片无法展示、接收端文件类型丢失等问题。

正确实现代码 #

1. Frontend实例（端口5000） #

import requests
from flask import Flask, request, redirect

webapp = Flask(__name__)

@webapp.route('/upload_image', methods=["GET", "POST"])
def upload_image():
    if request.method == "POST":
        uploaded_image = request.files['image']
        # 转发时保留文件的文件名、流和MIME类型，确保接收端能正确识别
        files = {
            'image': (uploaded_image.filename, uploaded_image.stream, uploaded_image.content_type)
        }
        # 发送请求到display实例，完成后重定向到展示页面
        requests.post('http://localhost:5001/receive_image', files=files)
        return redirect('http://localhost:5001/show_image')
    # 简化上传页面，添加提交按钮
    return '''
    <h2>上传图片</h2>
    <form method="POST" action="/upload_image" enctype="multipart/form-data">
        <input name="image" type="file" accept="image/jpeg, image/png">
        <button type="submit">提交</button>
    </form>
    '''

if __name__ == '__main__':
    webapp.run(port=5000, debug=True)

2. Display实例（端口5001） #

from flask import Flask, request, render_template, session
import base64

webapp = Flask(__name__)
webapp.secret_key = 'your_random_secret_key'  # 必须设置，用于存储session数据

@webapp.route('/receive_image', methods=["POST"])
def receive_image():
    if request.method == "POST":
        received_image = request.files['image']
        # 将图片内容编码为base64，同时记录MIME类型，存入session
        image_b64 = base64.b64encode(received_image.read()).decode('utf-8')
        session['image_info'] = {
            'base64': image_b64,
            'mime_type': received_image.content_type
        }
        return '接收成功'

@webapp.route('/show_image')
def show_image():
    image_info = session.get('image_info')
    if not image_info:
        return '未接收到图片'
    return render_template('show_image.html', image=image_info)

if __name__ == '__main__':
    webapp.run(port=5001, debug=True)

3. Display实例的模板（templates/show_image.html） #

<!DOCTYPE html>
<html lang="zh-CN">
<body>
    <h1>图片展示</h1>
    <!-- 严格遵循Data URI格式：MIME类型 + base64编码内容 -->
    <img src="data:{{image.mime_type}};base64, {{image.base64}}" style="max-width: 800px;">
</body>
</html>

关键修复点 #

• 保留文件元数据：转发时传递(文件名, 流, MIME类型)三元组，解决接收端文件类型为None的问题
• 正确处理Data URI：必须按照data:[MIME类型];base64,[编码内容]格式拼接，浏览器才能解析图片
• 使用Session存储数据：避免直接在响应中传递大体积base64字符串，提升传输效率
• 避免流读取异常：Flask的FileStorage流读取后会指向末尾，如需重复读取需调用stream.seek(0)重置指针

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