如何在Strapi中限制image媒体字段的文件上传类型

我之前做项目时也碰到过一模一样的需求，官方文档里确实没把这个点写得很明确，不过其实有两种实用的方法可以实现，下面给你一步步拆解：

方法一：利用生命周期钩子（推荐，覆盖API和后台操作） #

这种方法能同时拦截后台手动操作和API调用的上传请求，兼容性最好：

1. 找到你目标内容类型的模型文件，路径一般是 ./src/api/[你的内容类型名称]/models/[内容类型名称].js（如果用TypeScript就是 .ts 文件）
2. 在模型文件里添加 beforeCreate 和 beforeUpdate 生命周期钩子，用来在保存或更新内容时校验文件类型
3. 示例代码如下：

module.exports = {
  lifecycles: {
    async beforeCreate(data) {
      // 创建内容时验证图片类型
      await validateImageMimeType(data.image);
    },
    async beforeUpdate(params, data) {
      // 更新时只有当image字段有新值时才验证
      if (data.image) {
        await validateImageMimeType(data.image);
      }
    },
  },
};

// 封装的验证函数
async function validateImageMimeType(image) {
  // 定义允许的图片MIME类型，可根据需求增减
  const allowedImageMimes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp', 'image/svg+xml'];
  
  if (image && !allowedImageMimes.includes(image.mime)) {
    throw new Error('仅支持上传JPG、PNG、GIF、WebP、SVG格式的图片');
  }
}

当用户上传非图片格式的文件时，Strapi会抛出错误并阻止内容的创建/更新，不管是在后台操作还是通过API调用都会生效。

方法二：后台字段自定义验证（适合快速配置，仅覆盖后台操作） #

如果你的需求只需要限制后台手动上传的场景，可以直接在Strapi后台配置字段验证：

1. 登录Strapi后台，进入内容类型生成器，找到目标内容类型并点击编辑
2. 找到名为image的媒体字段，点击字段右侧的设置图标进入配置页面
3. 切换到Validation（验证）标签页，找到Custom validation（自定义验证）选项
4. 在输入框中粘贴以下验证函数：

(value) => {
  const allowedMimes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
  // 当字段有值时才验证类型
  if (value && !allowedMimes.includes(value.mime)) {
    return '仅支持上传JPG、PNG、GIF、WebP格式的图片';
  }
  return true;
}

保存配置后，在后台上传非图片文件时就会弹出错误提示，不过这种方法不会拦截API接口的上传请求，如果需要覆盖API场景，建议配合方法一一起使用。

额外提示 #

• 如果你需要支持更多图片格式，只需要在allowedMimes数组里添加对应的MIME类型即可，比如image/heic支持HEIC格式
• 测试时可以上传PDF、TXT等非图片文件，验证是否会触发错误提示

内容的提问来源于stack exchange，提问作者Simone Seagle