Python/Flask 表单提交后选中图片无法在结果页正常显示问题求解

• 表单缺少文件上传必填的enctype="multipart/form-data"属性，浏览器只会提交文件名不会传输文件内容
• Flask 中获取上传文件不能使用request.form，需要用request.files接口读取
• 没有将上传的图片保存到服务器静态资源目录，无法通过静态资源路径访问图片
• 结果页直接输出文件名文本，没有使用<img>标签加载图片资源
• 原路由逻辑存在传参错误：重定向为GET请求，request.form无法读取URL查询参数

步骤1：调整项目目录 #

在项目根目录下创建static/uploads文件夹，用于存储用户上传的图片。

步骤2：修改Home.html表单 #

给form标签添加文件上传必需的编码类型属性：

{% extends 'base.html' %}
{% block head %}
<title>Home Page</title>
{% endblock %}
{% block body %}

  <div class="content-container">
    <!-- 新增enctype属性 -->
    <form action="{{ url_for('result') }}" method="post" enctype="multipart/form-data">
      <h2>Input your name:</h2>
      <input type="text" class="user-input user mb-3" name="user">
      <h2>Select your image:</h2>
      <input type="file" accept="image/*" class="form-control-file"
             id="formControlFile1" name="image">
      <input class="btn btn-outline-primary" type="submit" value="Submit">
    </form>
  </div>

{% endblock %}

步骤3：修改Result.html渲染逻辑 #

用<img>标签加载静态目录下的图片：

{% extends 'base.html' %}
{% block head %}
<title>Result Page</title>
{% endblock %}
{% block body %}

  <div class="content-container">
    <h2>{{ name }}</h2>
    <!-- 替换为img标签加载图片 -->
    <img src="{{ url_for('static', filename='uploads/' + image) }}" alt="上传图片">
  </div>

{% endblock %}

步骤4：修改Main.py逻辑 #

添加上传配置、文件合法性校验、文件保存逻辑：

from flask import Flask, render_template, request, url_for, redirect
import os
from werkzeug.utils import secure_filename

app = Flask(__name__)
# 配置上传目录和允许的图片格式
app.config['UPLOAD_FOLDER'] = 'static/uploads'
app.config['ALLOWED_EXTENSIONS'] = {'png', 'jpg', 'jpeg', 'gif'}
# 自动创建上传目录
os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)

# 校验文件格式是否合法
def allowed_file(filename):
    return '.' in filename and \
           filename.rsplit('.', 1)[1].lower() in app.config['ALLOWED_EXTENSIONS']

@app.route('/', methods=['GET'])
def home():
    return render_template('home.html')

@app.route("/result", methods=['POST'])
def result():
    name = request.form.get('user')
    image_file = request.files.get('image')
    # 校验参数和文件合法性
    if not name or not image_file or not allowed_file(image_file.filename):
        return redirect(url_for('home'))
    # 处理文件名避免路径注入风险
    filename = secure_filename(image_file.filename)
    # 保存文件到静态目录
    image_file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
    return render_template("result.html", name=name, image=filename)

if __name__ == "__main__":
    app.run(debug=True)

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