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

在发送一些简单的内容时，我在使用 Fetch API JavaScript 方法时遇到一些问题formData像这样：

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没有这样的错误？

The 422错误响应正文将包含有关缺少哪个字段或与预期格式不匹配的字段的错误消息。由于您尚未提供（请这样做），我的猜测是由于您定义的方式而触发了该错误images端点中的参数。自从images预计将是一个List of File(s)，您应该使用File键入而不是Form。例如：

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

使用时UploadFile, 你不必使用File()在参数的默认值中，这意味着以下内容也应该有效：

images: List[UploadFile]

因此，FastAPI 端点应类似于以下内容：

@app.post("/user/register")
async def register_user(name: str = Form(...), images: List[UploadFile] = File(...)):
    pass

在前端，请确保使用body (not data) 中的参数fetch()函数来传递FormData对象（参见MDN Web 文档中的示例）。例如：

var nameInput = document.getElementById('nameInput'); 
var imagesInput = document.getElementById('imagesInput');

var formData = new FormData();
formData.append('name', nameInput.value);
for (const file of imagesInput.files)
    formData.append('images', file);

fetch('/user/register', {
      method: 'POST',
      body: formData,
   })
   .then(response => {
      console.log(response);
   })
   .catch(error => {
      console.error(error);
   });

请看一下这个答案， 也这个答案，其中提供了有关如何上传多个的工作示例files and form使用前端的 Fetch API 将数据传输到 FastAPI 后端。

至于手动指定Content-Type发送时multipart/form-data, you don't必须（并且不应该）这样做，而是让浏览器设置Content-Type——请看一下这个答案更多细节。