使用 FastAPI 从下拉菜单中获取数据

如何解决使用 FastAPI 从下拉菜单中获取数据

在 FastAPI 项目中，您可以轻松地将数据从 HTML 表单获取到后端。有一些内置方法可以从文本输入、文件上传等中获取数据。但是，下拉菜单在我的项目中似乎不起作用。 FastAPI 开发人员 TianGolo 拥有 addressed the issue after being requested 和 made a tutorial page including dropdown menus。我尝试按照与他相同的步骤进行操作，但无法将下拉菜单中的数据导入后端。

我的代码如下：

• view.py ：包含带有下拉值的枚举，并生成 html 模板。

class dropdownChoices(str,Enum):
    water = "WATER"
    fire = "FIRE"
    electric = "ELECTRIC"
    grass = "GRASS"
    donut = "DONUT"

@router.get('/upload')
def upload(request: Request):
    return templates.TemplateResponse('upload.html',context={'request': request,'choices': [e.value for e in dropdownChoices]})

• upload.html ：将显示我的表单的模板，包含下拉菜单。

<form action="/upload" method="post" enctype="multipart/form-data">
    <div class="form-group">
        <label for="choices_dropdown">Choose:</label>
        <select id="choices_dropdown" name="dropdown_choices">
            {% for choice in choices %}
            <option value={{choice}}>{{choice}}</option>
            <!-- The choices are correctly displayed in the dropdown menu -->
            {% endfor %}
        </select>
    </div>
    <!-- More form actions including file upload and checkBox. These work. -->
    <div class="form-group">
        <label for="upload_file">Choose Upload File:</label>
        <input type="file" class="form-control-file" name='upload_file' id="upload_file">
        <input class="form-check-input" type="checkBox" name='overwrite_existing' id="flexCheckChecked"> Overwrite existing
    </div>
    <button id="upload" type='submit' class="btn btn-primary">Upload</button>
</form>

• main.py ：处理表单中的数据。

# Gets data from upload.html
@app.post("/upload")
async def handle_form(request: Request,choice: str = "WATER",upload_file: UploadFile = File(...),overwrite_existing: bool = Form(False)):
    print(choice) #does NOT work: always print default ("WATER")
    print(overwrite_existing) #Works,prints true or false depending on input
    contents = await upload_file.file.read() #Works,file is later read etc
    return templates.TemplateResponse('upload.html','choices': [e.value for e in view.dropdownChoices]})

我觉得我已经完全遵循了教程，但我总是得到默认选择。如果我不在 handle_form() 方法中放置默认选项，我将一无所获。 我不明白为什么用户从下拉菜单中的选择没有像其他人一样传输。

解决方法

您在表单中的名字是 dropdown_choices。您在 FastAPI 端点定义中的名称是 choice。这些需要相同。您还想告诉 FastAPI 这也是一个表单字段（就像您对复选框所做的那样）：

choice: str = Form("WATER"),

您还应该将选项值包含在 "" 中：

<option value="{{choice}}">

选择框没有什么神奇之处；数据以通常的方式提交 - 通过 GET 或通过 POST。

,

你总是得到默认选择，因为你设置了它，并且它没有以匹配的名称发送。

choice: str = "WATER",

在这里，您说您期望 choice，不是作为枚举而是作为一个普通的 str，并且您将默认值设置为文字 str "WATER"。 但是在您的前端，您以 dropdown_choices 的名称发送它。

<select id="choices_dropdown" name="dropdown_choices">

此外，通过这样的声明，Fastapi 会期望将值作为查询参数发送，但您的前端将其作为表单数据的主体的一部分发送。 为了让 fastapi 正确地将其放在它所在的位置并正确验证它，您需要同时具有匹配的名称和类型。

async def handle_form(request: Request,dropdown_choices: dropdownChoices = Form(dropdownChoices.water),upload_file: UploadFile = File(...),overwrite_existing: bool = Form(False)):

现在用正确的名称声明值，应该直接作为枚举进行解析和验证。默认值也声明为枚举的成员，而不是无关的str。