Flask实现图片上传后跳转显示页面遇400错误求助

首先，你遇到的400 Bad Request错误核心原因是表单文件字段名不匹配，另外还有文件存储路径、目录存在性等几个小问题，我帮你逐一梳理并修复：

1. 表单字段名与后端接收不匹配（400错误的直接原因） #

你的index.html里文件输入框的name是image-input：

<input name="image-input" id="file-input" type="file" align="center" onchange="this.form.submit();">

但在app.py的predict函数里，你尝试获取的是request.files['file']——这两个名字完全不一致，Flask找不到对应的上传文件，直接返回400错误。

修复方式：二选一即可

• 把后端代码里的file = request.files['file']改成file = request.files['image-input']，和前端字段名对齐
• 或者把前端的name="image-input"改成name="file"，匹配后端原代码

2. 上传目录路径错误 #

你设置的UPLOAD_FOLDER = '/static/images/'是系统绝对路径，会指向系统根目录下的/static/images，而不是你Flask项目里的static目录，导致文件根本存不到你预期的位置，甚至可能因为权限问题保存失败。

修复方式：用Flask的根目录来构建正确的相对路径，同时确保目录存在：

# 替换原UPLOAD_FOLDER的定义
UPLOAD_FOLDER = os.path.join(app.root_path, 'static', 'images')
# 自动创建目录（如果不存在），避免保存文件时抛出异常
os.makedirs(UPLOAD_FOLDER, exist_ok=True)

3. 可选：secure_filename的导入兼容问题 #

新版本的Werkzeug中，secure_filename已经从werkzeug主模块移到了werkzeug.utils，如果你的Werkzeug版本较新，原导入方式会报错，建议修改导入语句：

from werkzeug.utils import secure_filename

4. 额外优化：文件后缀名大小写兼容 #

可以把文件后缀名转成小写，避免用户上传.PNG这类大写后缀时被判定为不允许的格式：

def allowed_file(filename):
    return '.' in filename and \
           filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS

修复后的关键代码示例 #

修改后的app.py核心片段： #

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

app = Flask(__name__)
# 构建正确的上传目录路径
UPLOAD_FOLDER = os.path.join(app.root_path, 'static', 'images')
# 自动创建目录（不存在则创建）
os.makedirs(UPLOAD_FOLDER, exist_ok=True)
ALLOWED_EXTENSIONS = set(['png', 'jpg', 'jpeg', 'tiff'])
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER

def allowed_file(filename):
    return '.' in filename and \
           filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS

@app.route('/predict/', methods=['POST', 'GET'])
def predict():
    if request.method == 'POST':
        # 匹配前端的字段名
        file = request.files['image-input']
        if file and allowed_file(file.filename):
            filename = secure_filename(file.filename)
            file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
            return redirect(url_for('uploaded_file', filename=filename))
    # 其余代码保持不变

做完这些修改后，应该就能正常上传图片并跳转到展示页面了。

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