React前端上传图片时FastAPI报422 Unprocessable Entity错误

核心问题 #

返回422 Unprocessable Entity的原因是请求数据格式不匹配+后端代码逻辑错误，具体包含以下几点：

1. FastAPI后端文件处理逻辑错误 #

你定义的image参数是bytes = File(None)，但代码里却把它当成base64字符串处理（image.split(",")[1]）。当通过FormData上传文件时，FastAPI的File参数实际接收的是UploadFile对象（不是字符串），调用split方法会直接触发类型错误，导致参数验证失败返回422。

另外，后端逻辑存在矛盾：你把image设为可选参数（= File(None)），但又在elif里判断如果image为None就抛400错误，这会导致用户不传图片时直接报错。

2. React前端Content-Type设置错误 #

手动设置'Content-Type': 'multipart/form-data'会导致axios无法自动生成正确的boundary分隔符，后端无法解析FormData，这也是422错误的诱因之一。

具体修复步骤 #

修复FastAPI后端代码 #

from fastapi import UploadFile  # 先导入UploadFile

@post.post('/post')
async def create_post(
    post_text: str, 
    image: UploadFile | None = File(None),  # 改为UploadFile类型，支持可选
    token: str = Depends(oauth2_scheme), 
    db: Session = Depends(database.get_db)
):
    user_info = await services.get_user_info(token)
    username = user_info["username"]
    image_url = None
    
    # 调整图片处理逻辑：只有当image存在且文件名不为空时才处理
    if image and image.filename:
        image_filename = f"{username}_{uuid.uuid4().hex}.jpg"
        # 正确读取上传文件的字节
        image_bytes = await image.read()
        
        minio_client.put_object(
            "minilinkedindistributed",
            image_filename,
            io.BytesIO(image_bytes),  
            length=len(image_bytes),
            content_type="image/jpeg"
        )
        
        image_url = f"http://127.0.0.1:9000/minilinkedindistributed/{image_filename}"
    # 如果需要强制传图，就保留下面的判断；不需要则删除
    # elif not image:
    #     raise HTTPException(status_code=400, detail='请上传图片')
    
    new_post = services.make_post(db, username, post_text, image_url)
    
    # 后续通知逻辑保持不变...
    
    return{"message" : new_post}

修复React前端代码 #

去掉手动设置的Content-Type，让axios自动处理FormData的请求头：

const handleSubmitPost = async () => {
    const formData = new FormData();
    formData.append('post_text', postText);
    if (selectedImage) {
      formData.append('image', selectedImage, selectedImage.name);
    }

    const access_token = localStorage.getItem('access_token');
  
    try {
      const response = await axios.post(`${API_BASE_URL}/post`, formData, {
        headers: {
          Authorization: `Bearer ${access_token}`,
          // 删掉这一行：'Content-Type': 'multipart/form-data',
        },
      });

      fetchPosts(access_token);
      
    } catch (error) {
      console.error('Error submitting post:', error.response);
    }
};

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