React.js中如何从图片URL获取格式以完成Yup表单校验

实现方案 #

直接拆分URL提取文件后缀，映射为MIME类型后和支持的格式列表比对即可，额外需要处理URL带查询参数、哈希锚点的边界情况，完整代码如下：

const SUPPORTED_FORMATS = ["image/jpg", "image/jpeg", "image/png"];

const schema = Yup.object({
  image: Yup.mixed()
    .required("Please select Image")
    .test("fileFormat", "Unsupported Format", (value) => {
      // 空值防御
      if (!value) return false;
      // 移除URL后的查询参数、哈希锚点，避免干扰后缀提取
      const cleanUrl = value.split(/[?#]/)[0];
      // 提取文件后缀并转为小写
      const fileExt = cleanUrl.split('.').pop()?.toLowerCase();
      if (!fileExt) return false;
      // 校验格式是否符合要求
      return SUPPORTED_FORMATS.includes(`image/${fileExt}`);
    }),
})

如果需要更高的容错性，可以额外加一层后缀白名单校验：

const ALLOWED_EXT = ['jpg', 'jpeg', 'png'];
const SUPPORTED_FORMATS = ["image/jpg", "image/jpeg", "image/png"];

// test函数内调整为：
.test("fileFormat", "Unsupported Format", (value) => {
  if (!value) return false;
  const cleanUrl = value.split(/[?#]/)[0];
  const fileExt = cleanUrl.split('.').pop()?.toLowerCase();
  if (!fileExt || !ALLOWED_EXT.includes(fileExt)) return false;
  return SUPPORTED_FORMATS.includes(`image/${fileExt}`);
})

如果你的业务场景中存在无后缀的图片URL，需要发起HEAD请求获取响应头的Content-Type字段再做校验，常规带后缀的URL场景下上述方案已满足需求。

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