Flask图片上传触发BadRequestKeyError: 'imageFile'的问题解决问询

问题场景 #

开发Flask图片上传处理应用时，通过HTML表单上传图片触发werkzeug.exceptions.BadRequestKeyError，错误信息如下：

werkzeug.exceptions.BadRequestKeyError: 400 Bad Request: The browser (or proxy) sent a request that this server could not understand.
KeyError: 'imageFile'

涉及代码如下：

Flask后端代码 #

from flask import Flask, render_template, request

app = Flask(__name__)

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

@app.route("/", methods=['POST'])
def end():
    imageFile = request.files['imageFile']

    image_path = "./images/" + imageFile.filename
    imageFile.save(image_path)

    return render_template("process.html")

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

HTML前端模板 #

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Neural Network Visualization</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous" />
 </head>
 <body>
  <h1 class="text-center">image classifier</h1>
  
  <form class="p-3 text-center" action="/" method="post" enctype="multipart/form-data" >
    <input class="form-control" type="file" name="img">
    <input class="btn btn-primary mt-3" type="submit" value="predict image">
    <div class="cemter"> <h1>{{my_string}}</h1></div>
  </form>
 </body>
 </html>

错误原因 #

Flask后端代码中通过request.files['imageFile']获取上传文件，但HTML表单里文件输入框的name属性是img，两者名称不匹配，导致后端无法找到对应键值，触发KeyError。

解决方法 #

只需要保证后端获取文件的键名和前端表单的name属性一致即可，两种修改方式任选其一：

方式一：修改Flask后端代码 #

将获取文件的键名改为img，同时建议增加文件存在性校验，避免无文件提交的情况：

@app.route("/", methods=['POST'])
def end():
    # 先检查是否有上传文件
    if 'img' not in request.files:
        return render_template("process.html", my_string="请选择要上传的图片")
    imageFile = request.files['img']
    # 检查是否选择了有效文件
    if imageFile.filename == '':
        return render_template("process.html", my_string="请选择有效的图片文件")
    
    image_path = "./images/" + imageFile.filename
    imageFile.save(image_path)

    return render_template("process.html", my_string="图片上传成功")

方式二：修改HTML前端代码 #

将文件输入框的name属性改为imageFile，和后端代码保持一致：

<input class="form-control" type="file" name="imageFile">

额外注意事项 #

1. 确保表单已设置enctype="multipart/form-data"，这是文件上传的必要条件，你当前的代码已经满足这一点。
2. 确保./images/目录存在，否则保存文件会抛出目录不存在的错误，可以提前创建该目录，或者在代码中加入目录创建逻辑：

import os
# 确保images目录存在
os.makedirs('./images/', exist_ok=True)

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