在发送一些简单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没有这样的错误？
1条答案
按热度按时间rpppsulh1#
422响应主体将包含一条错误消息，该消息指出缺少或与预期格式不匹配。由于您尚未提供（请执行此操作），我猜测该错误是由于您在端点中定义images参数的方式而触发的。（s），则应改为使用File类型而不是Form来定义它。例如：当使用
UploadFile时，您不必在参数的默认值中使用File()。因此，下面的语句也应该有效：请看this answer和this answer，它们提供了如何在前端使用Fetch API将
files和form数据上传到FastAPI后端的工作示例。至于在发送multipart/form-data时手动指定Content-Type，您不应该这样做。请看this answer了解更多细节。