Nuxt3(Vue3)前端向FastAPI后端上传图片遇422错误求助

你的422错误核心是前端请求的格式不符合FastAPI的要求，以下是具体问题和修正方案：

关键错误点 #

1. 变量作用域与大小写错误：handleFileInputChange里定义的是formData（大写D），但handleUpload里误用了formdata（小写d），导致请求时取不到文件数据。
2. 请求体格式错误：你把FormData包装成了普通对象{ file: formdata.file }，但multipart/form-data请求的body必须直接传入FormData实例。
3. 手动设置Content-Type错误：手动指定'Content-Type': 'multipart/form-data'会丢失浏览器自动生成的boundary分隔符，FastAPI无法解析请求体。

修正后的前端代码 #

脚本部分（修复作用域与变量名） #

// 将formData提升到外部作用域，确保两个函数都能访问
let formData = new FormData();

async function handleFileInputChange(event) {
  // 每次选择文件重置FormData，避免重复添加
  formData = new FormData();
  formData.append("file", event.target.files[0]);
}

上传请求函数（修复请求格式） #

async function handleUpload() {
  // 先校验是否选择了文件
  if (!formData.has("file")) {
    console.error("请先选择上传文件");
    return;
  }

  const url = "http://0.0.0.0:8000/api/v1/upload";
  const requestOptions = {
    method: "POST",
    // 移除手动设置的Content-Type，浏览器会自动生成带boundary的正确头
    body: formData,
  };

  try {
    const data = await $fetch(url, requestOptions);
    console.log("上传成功", data);
  } catch (error) {
    console.error("上传失败", error);
  }
}

额外检查项 #

• 如果前端和后端存在跨域问题，需要在FastAPI中配置CORS中间件：

from fastapi.middleware.cors import CORSMiddleware

app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],  # 生产环境请替换为具体前端域名
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

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