Python Flask网页图片上传后未显示识别结果，跳转至文件目录求助

问题现象 #

开发图像识别程序时，AI模型核心已完成，但通过Flask集成到网站后，上传图片会跳转到包含图片和项目文件的目录页面，无法正常显示带有预测结果的页面。

项目目录结构（根据截图整理） #

• 根目录
  • 主Python文件（如app.py）
  • html文件夹
    • enter_p.html（上传页面）
    • results.html（结果页面）
  • static文件夹
    • uploads文件夹（存储上传图片）

现有代码 #

Flask后端代码 #

from flask import Flask, render_template, request, redirect, url_for
import os
# 假设model是已加载的图像识别模型

app = Flask(__name__)
# 补充配置：需添加上传文件夹路径
# app.config['UPLOAD_FOLDER'] = 'static/uploads'

@app.route('/')
def index():
    return render_template('html/enter_p.html')

@app.route('/upload', methods=['POST'])
def upload_file():
    if 'file' not in request.files:
        return redirect(request.url)
    file = request.files['file']
    if file.filename == '':
        return redirect(request.url)
    if file:
        # Save the file
        file_path = os.path.join(app.config['UPLOAD_FOLDER'], file.filename)
        file.save(file_path)
        # Redirect to the prediction page
        return redirect(url_for('predict', filename=file.filename))

@app.route('/predict/<filename>')
def predict(filename):
    # Load your model and make a prediction
    result = model.predict(os.path.join(app.config['UPLOAD_FOLDER'], filename))  # Replace with your prediction logic
    return render_template('results.html', prediction=result, filename=filename)

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

结果页面（results.html）代码片段 #

<div class="container">
    <h1>Prediction Result: {{ prediction }}</h1>
    <img src="{{ url_for('static', filename='uploads/' + filename) }}" alt="Uploaded Mole Image" width="300px">
    <br>
</div>

上传表单（enter_p.html）代码片段 #

<form action="../static/uploads/" method="post" enctype="multipart/form-data">
    <input type="file" name="file" accept="image/*" required>
    <button type="submit">Upload</button>
</form>

核心问题与修复步骤 #

1. 修正上传表单的提交路径
   表单的action错误指向了静态文件目录，导致上传后直接跳转到文件列表页面。将其修改为Flask定义的/upload路由：

   <form action="/upload" method="post" enctype="multipart/form-data">
       <input type="file" name="file" accept="image/*" required>
       <button type="submit">Upload</button>
   </form>
   

2. 补充Flask上传配置
   在Flask初始化后添加上传文件夹的配置，确保后端能正确保存图片：

   app.config['UPLOAD_FOLDER'] = 'static/uploads'
   # 可选：限制上传文件大小，避免过大文件
   app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024  # 16MB
   

   同时确认static/uploads文件夹已存在，若不存在手动创建。

3. 确认模板路径正确性
   若Flask无法找到html/enter_p.html或results.html，需要检查模板路径配置。如果html文件夹在根目录，需初始化Flask时指定模板目录：

   app = Flask(__name__, template_folder='.')
   

   或者将html文件夹移动到默认的templates目录下，调整render_template的路径为enter_p.html和results.html。

4. 验证模型预测逻辑
   确保model.predict()返回的result是可在HTML中渲染的格式（如字符串、数字），若返回复杂结构，需先转换为可读内容。

5. 测试流程
   启动Flask应用后，访问首页上传图片，此时会提交到/upload路由，保存图片后跳转至/predict/文件名页面，展示预测结果和上传的图片。

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