当我使用 JavaScript Fetch API 发送多部分表单数据时，FastAPI 返回“错误 422：无法处理的实体”答案

【问题标题】：FastAPI returns "Error 422: Unprocessable entity" when I send multipart form data with JavaScript Fetch API当我使用 JavaScript Fetch API 发送多部分表单数据时，FastAPI 返回“错误 422：无法处理的实体”
【发布时间】：2022-11-20 20:01:35
【问题描述】：

在发送一些简单的 formData 时，我在使用 Fetch API JavaScript 方法时遇到一些问题，如下所示：

function register() {
  var formData = new FormData();
  var textInputName = document.getElementById('textInputName');
  var sexButtonActive = document.querySelector('#buttonsMW > .btn.active');
  var imagesInput = document.getElementById('imagesInput');

  formData.append('name', textInputName.value);
  if (sexButtonActive != null){
    formData.append('sex', sexButtonActive.html())
  } else {
    formData.append('sex', "");
  }
  formData.append('images', imagesInput.files[0]);

  fetch('/user/register', {
    method: 'POST',
    data: formData,
  })
  .then(response => response.json());
}
document.querySelector("form").addEventListener("submit", register);

在服务器端（FastAPI）：

@app.post("/user/register", status_code=201)
def register_user(name: str = Form(...), sex: str = Form(...), images: List[UploadFile] = Form(...)):
try:
    print(name)
    print(sex)
    print(images)
    return "OK"
except Exception as err:
    print(err)
    print(traceback.format_exc())
    return "Error"

单击提交按钮后，我得到Error 422: Unprocessable entity。因此，如果我尝试添加标题 Content-Type: multipart/form-data，它也无济于事，因为我得到另一个 Error 400: Bad Request。我想了解我做错了什么，以及如何在没有此类错误的情况下处理formData？

【问题讨论】：

标签： javascript python fetch fetch-api fastapi

【解决方案1】：

422 响应正文将包含有关哪些字段丢失或与预期格式不匹配的错误消息。由于您没有提供（请提供），我的猜测是错误是由于您在端点中定义 images 参数而触发的。因为 images 应该是 File 的 List，所以你应该使用 File 类型而不是 Form 来定义它。例如：

images: List[UploadFile] = File(...)

使用UploadFile、you don't have to use File() in the default value of the parameter时。因此，以下内容也应该有效：

images: List[UploadFile]

请查看this answer 和this answer，它们提供了有关如何在前端使用 Fetch API 将files 和form 数据上传到 FastAPI 后端的工作示例。至于在发送multipart/form-data时手动指定Content-Type，你不应该。请查看this answer了解更多详情。

【讨论】：