使用Bootstrap 5/FastAPI上传文件失败求助

问题原因 #

你的HTML表单未指定正确的编码类型，默认的application/x-www-form-urlencoded会将文件字段以字符串形式传递，而FastAPI的UploadFile参数要求接收multipart格式的文件数据，因此触发类型错误。

解决方案 #

给表单标签添加enctype="multipart/form-data"属性，并确保表单使用POST方法提交。修改后的完整表单代码如下：

<form method="POST" enctype="multipart/form-data">
  <div class="mt-lg-3 mb-3">
    <label for="formFile" class="form-label">Upload template (formats: .j2 or .html only)</label>
    <input class="form-control" type="file" accept=".j2,.html" id="formFile" name="formFile">
  </div>
  <button type="submit" class="btn btn-primary">Upload</button>
</form>

关键说明 #

• enctype="multipart/form-data"：该属性强制浏览器以多部分表单数据格式发送请求，这是文件上传必须的编码类型。
• 表单method必须设为POST：文件上传仅支持POST请求方式。
• 确保文件输入框的name属性值（此处为formFile）与FastAPI接口中定义的参数名完全一致，避免字段匹配失败。

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