React上传文件到FastAPI返回422 Unprocessable Entity报错解决

返回422 Unprocessable Entity是前端上传请求的写法不符合文件上传规范，有两处致命错误：

• 请求体传错：你已经正确构造了存储文件的FormData实例，但发请求时错误地把FormData包在了{ file: formdata }这个普通JS对象里传给axios。这种写法下axios会把外层对象按JSON格式序列化，根本不会按multipart规则上传文件，FastAPI后端找不到名为file的上传文件字段，自然校验失败。
• 请求头设置错误：手动配置"Content-Type": "multipart/form-data"是常见踩坑点。multipart格式的请求必须携带浏览器自动生成的boundary分隔符，用来拆分请求体里的不同字段，你手动写死这个请求头会覆盖浏览器自动生成的带合法boundary的头，后端完全无法解析请求内容。

你的FastAPI后端代码没有问题，只需要修改前端axios的请求逻辑即可，修正后的代码如下：

const [file, uploadFile] = useState(null)

// 上传按钮点击触发
function handleSubmit(){
    console.log(file[0].name)
    const formdata = new FormData();
    formdata.append("file", file[0])
    // 直接传FormData实例作为请求体，不要套外层对象，也不要手动设置Content-Type，浏览器会自动补全正确的请求头
    axios.post("/uploadfile", formdata)
          .then(function (response) {
            console.log(response);
          });
}

// 选择文件后存储文件对象
function handleChange(e){
    uploadFile(e.target.files);
}

提示：如果后续要传其他普通表单字段，直接用formdata.append("字段名", "字段值")加在同一个FormData实例里即可，FastAPI后端可以按参数名正常接收。

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