使用Cloudinary API上传图片异常：选图后仍提示选图且上传失败

我使用Cloudinary API实现图片上传功能时遇到异常：已选择图片，却仍收到“Please Select an Image!”的提示，加载状态结束后图片并未完成上传。以下是我编写的代码：

const postDetails = (pics) => {
    setLoading(true);
    if(pic===undefined) {
      toast({
        title: "Please Select an Image!",
        status: "warning",
        duration: 5000,
        isClosable: true,
        position: "bottom",
      });
      return;
    }

    if(pics.type === "image/jpeg" || pics.type === "image/png") {
      const data = new FormData();
      data.append("file",pics);
      data.append("upload_present", "chat-app");
      data.append("cloud_name", "*******");
      fetch("https://api.cloudinary.com/v1_1/******* ", {
        method: "post",
        body: data,
      }).then((res) => res.json())
        .then(data => {
          setPic(data.url.toString());
          console.log(data.url.toString());
          setLoading(false);
        })
        .catch((err) => {
          console.log(err);
          setLoading(false);
        });
    } else {
        toast({
          title: "Please Select an Image!",
          status: "warning",
          duration: 5000,
          isClosable: true,
          position: "bottom",
      });
      setLoading(false);
      return;
    }
  };

核心错误点及修复方案 #

• 变量名不一致：函数参数是pics，但第一个判断条件误用了pic（少了末尾的s），导致即使传入图片也会触发提示并终止流程。修复为判断pics === undefined。
• Cloudinary参数拼写错误：upload_present应为upload_preset，错误的参数名会导致Cloudinary无法识别上传预设，上传请求失败。
• API URL末尾有空格：请求地址末尾的空格会导致URL无效，需删除该空格。

修正后的完整代码 #

const postDetails = (pics) => {
    setLoading(true);
    if(pics === undefined) {
      toast({
        title: "请选择一张图片！",
        status: "warning",
        duration: 5000,
        isClosable: true,
        position: "bottom",
      });
      return;
    }

    if(pics.type === "image/jpeg" || pics.type === "image/png") {
      const data = new FormData();
      data.append("file", pics);
      data.append("upload_preset", "chat-app");
      data.append("cloud_name", "*******");
      fetch("https://api.cloudinary.com/v1_1/*******", {
        method: "post",
        body: data,
      }).then((res) => res.json())
        .then(data => {
          setPic(data.url.toString());
          console.log(data.url.toString());
          setLoading(false);
        })
        .catch((err) => {
          console.error("上传失败:", err);
          setLoading(false);
        });
    } else {
        toast({
          title: "请选择一张图片！",
          status: "warning",
          duration: 5000,
          isClosable: true,
          position: "bottom",
      });
      setLoading(false);
      return;
    }
  };

额外检查建议 #

• 确认cloud_name和upload_preset配置正确，且上传预设已设置为未签名上传（当前代码未使用签名验证）。
• 在catch块中打印详细错误信息，便于后续排查其他潜在问题。

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