我收到 422 错误代码，并显示图像不能为空的消息

Question

我收到 422 错误代码，并显示图像不能为空的消息。我将发送图像作为 formData 的一部分，我通过 console.log 我的数据来查看图像是否正在发送，这表明它正在发送。

但是，我不断收到 422 无法处理的内容，并响应图像不能为空。

const [testimonials, setTestimonials] = useState<TestimonialProps>({
    id: 0,
    body: "",
    testifier: "",
    position: "",
    image: null,
  });

  const { body, testifier, position, id, image } = testimonials || {};
  const fileInputRef = useRef<HTMLInputElement>(null);

  const handleEditTestimony = (selectedTestimonial: TestimonialProps) => {
    // Populate the state with the values of the selected testimonial
    setTestimonials({
      body: "",
      id: 0,
      image: null,
      position: "",
      testifier: "",
    });
  };

  // eslint-disable-next-line no-unused-vars
  const handleImageChange = async (event: ChangeEvent<HTMLInputElement>) => {
    console.log("changing imagee");
    if (
      fileInputRef.current &&
      fileInputRef.current.files &&
      event.target.files
    ) {
      const file = event.target.files[0];
      console.log("Selected file:", file);

      setTestimonials((prevTestimonial) => ({
        ...prevTestimonial,
        image: file,
      }));
    }
  };

  console.log("Testimonials state:", testimonials);

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

      const payload = {
        ...formData,
      };

      const data = await postAPI(apiEndpoint, payload, 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);
    }
  };

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

    // Append image data to formData if it exists
    if (testimonials.image) {
      formData.append("image", testimonials.image);
    }

    const data: Partial<TestimonialProps> = {};

    // Iterate through formData entries
    for (let [key, value] of formData.entries()) {
      // Exclude specific keys
      if (
        key !== "testimonialButtonText" &&
        key !== "testimonialSubheading" &&
        key !== "testimonialHeading"
      ) {
        data[key as keyof TestimonialProps] = value as any;
      }
    }

    handleSubmit(
      event,
      data as TestimonialProps,
      "/cms/home/testimony",
      "Testimonial saved",
      "Testimonial not saved"
    );
    console.log("Data submitted:", data);
  };

图像渲染位置：

{testimonials?.length > 0 && testimonials[currentIndex].body !== "" ? (
          <div className="w-[100%] flex item-start justify-start">
            <div>
              <p className=" text-[#FFE6D2] text-[1.2rem] lg:text-lg xl:text-xl font-thin leading-7 lg:leading-10 pb-8">
                {testimonials[currentIndex].body}
              </p>
              <div className="flex items-center gap-8">
                <CustomImage
                  height={62}
                  width={62}
                  className="rounded-full"
                  src={testimonialImage as unknown as StaticImageData}
                  alt="Testifier Image"
                  style={{ borderRadius: "50%" }}
                  loader={testimonialImage as unknown as ImageLoader}
                />
                <div>
                  <p className="font-semibold text-[20px] sm:text-[25px] text-white">
                    {testimonials[currentIndex].testifier}
                  </p>
                  <p className="text-[#fff7d7] font-[300]">
                    {testimonials[currentIndex].position}
                  </p>
                </div>
              </div>
            </div>
            <DropdownMenu>
              <DropdownMenuTrigger>
                <BsThreeDotsVertical color="#ffffff" size={20} />
              </DropdownMenuTrigger>
              <DropdownMenuContent className="bg-white w-[130%] rounded-lg">
                <DropdownMenuItem className="space-x-4 cursor-pointer">
                  <FaRegEdit size={20} />
                  <p>Edit</p>
                </DropdownMenuItem>
                <DropdownMenuItem
                  className="space-x-4 cursor-pointer"
                  onClick={handleDelete}
                >
                  <MdDeleteOutline size={20} />
                  <p>Delete</p>
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        ) : (
          <p>No Testimonial</p>
        )}```

postAPI service: 

  ```export const postAPI = async (url: string, post: any, token?:string | undefined) => {
      const res = await axios.post(`${Base_URL}${url}`, post, {
        headers: { Authorization: 'Bearer ' + token },
      });
      return res;
    };```


I have console.log formData to see if image is sent and it's true from my result that it's being sent. I have tested the api with postman and it was successful. Image is expected to be a file.

Answer 1

我通过调整我的poatAPI服务解决了这个问题，感谢Phil的回复，它给了我一个提示：

export const postAPI = async (
url: string,
post: any,
token?: string | undefined
) => {
const config = {
 headers: {
   Authorization: "Bearer " + token,
   "Content-Type": "multipart/form-data", // Set content type to multipart/form-data
 },
};
const res = await axios.post(`${Base_URL}${url}`, post, config);
return res;
}; ```