提交FormData遇422错误：提示image不能为空求助

问题背景 #

在React项目中提交包含图片的FormData时，控制台打印显示图片已正常传入，但后端始终返回422 Unprocessable Content错误，错误信息为“image cannot be empty”。已通过Postman测试该API，确认接口可正常接收文件类型的图片，但代码调用接口时问题依旧。

核心问题分析 #

• FormData被转成普通对象导致文件丢失：在handleTestimonialSubmit中，将FormData内容提取到普通JavaScript对象data后传给handleSubmit，但文件对象（File）无法通过JSON格式传输，必须直接提交FormData实例。
• Axios请求头配置错误：提交FormData时，Axios需要自动设置Content-Type: multipart/form-data，但传入普通对象时，Axios默认用application/json格式，导致后端无法解析文件。
• 不必要的类型转换：将FormData转成普通对象的过程中，文件类型的image会丢失或无法正确序列化，后端自然接收不到。

修复步骤 #

1. 直接传递FormData给API #

修改handleTestimonialSubmit，跳过FormData转普通对象的操作，直接处理后传递：

const handleTestimonialSubmit = (event: FormEvent<HTMLFormElement>) => {
  event.preventDefault();
  const formData = new FormData(event.currentTarget);

  // 移除不需要的字段
  formData.delete("testimonialButtonText");
  formData.delete("testimonialSubheading");
  formData.delete("testimonialHeading");

  // 追加图片到FormData（如果存在）
  if (testimonials.image) {
    formData.append("image", testimonials.image);
  }

  handleSubmit(
    event,
    formData, // 直接传递FormData实例
    "/cms/home/testimony",
    "Testimonial saved",
    "Testimonial not saved"
  );
  console.log("Data submitted:", formData);
};

2. 更新handleSubmit和postAPI支持FormData #

调整handleSubmit的参数类型，直接接收FormData：

const handleSubmit = async (
  event: FormEvent<HTMLFormElement>,
  formData: FormData,
  apiEndpoint: string,
  successMessage: string,
  errorMessage: string
) => {
  try {
    setLoading(true);

    const data = await postAPI(apiEndpoint, formData, token);

    if (data.status === 201) {
      toast({
        title: successMessage,
        description: "Form successfully submitted.",
      });
    }
  } catch (err) {
    toast({
      title: errorMessage,
      description: "Unable to submit, please enter valid details.",
      variant: "destructive",
    });
    console.error(err);
  } finally {
    setLoading(false);
  }
};

修改postAPI，让Axios自动处理FormData的请求头：

export const postAPI = async (url: string, post: any, token?: string | undefined) => {
  const headers: any = {};
  if (token) {
    headers.Authorization = 'Bearer ' + token;
  }
  // 传入FormData时，Axios会自动设置multipart/form-data请求头
  const res = await axios.post(`${Base_URL}${url}`, post, { headers });
  return res;
};

3. 优化图片状态处理（可选） #

简化handleImageChange的逻辑，确保正确获取文件：

const handleImageChange = (event: ChangeEvent<HTMLInputElement>) => {
  const file = event.target.files?.[0];
  if (file) {
    console.log("Selected file:", file);
    setTestimonials(prev => ({ ...prev, image: file }));
  }
};

关键说明 #

• 包含文件的表单必须提交FormData实例，不能转成普通对象，否则文件无法正确序列化传输。
• Axios接收FormData作为请求体时，会自动生成正确的multipart/form-data请求头，手动指定反而可能导致边界符错误。
• 避免在FormData和普通对象之间来回转换，保持数据类型一致性。

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