Strapi v4中如何限制图片上传为特定类型（如.svg）？

不用为每个集合重复写生命周期验证，推荐以下几种全局/批量生效的方法：

1. 扩展上传插件核心服务（全局生效） #

直接拦截所有上传请求，在上传前统一验证文件类型，所有集合的上传字段都会自动生效。

实现步骤： #

1. 在项目根目录创建路径 src/extensions/upload/services/（目录不存在则新建）
2. 创建 upload.js 文件，写入以下代码：

const { createCoreService } = require('@strapi/strapi').factories;

module.exports = createCoreService('plugin::upload.upload', ({ strapi }) => ({
  async upload(files, { user, refId, ref, source, field } = {}) {
    // 定义允许的MIME类型，这里仅保留SVG
    const allowedMimeTypes = ['image/svg+xml'];
    
    // 遍历所有上传文件进行验证
    for (const file of files) {
      if (!allowedMimeTypes.includes(file.mime)) {
        throw new Error(`仅支持SVG格式文件，当前文件类型：${file.mime}`);
      }
    }
    
    // 验证通过后调用原上传逻辑
    return await super.upload(files, { user, refId, ref, source, field });
  },
}));

3. 重启Strapi服务，所有上传操作都会触发该验证。

如果需要针对特定集合/字段设置不同的类型限制，可以修改验证逻辑：

const { createCoreService } = require('@strapi/strapi').factories;

module.exports = createCoreService('plugin::upload.upload', ({ strapi }) => ({
  async upload(files, { user, refId, ref, source, field } = {}) {
    // 定义不同集合字段的类型规则
    const typeRules = {
      'api::article.article': {
        cover: ['image/svg+xml'], // 文章封面仅允许SVG
        gallery: ['image/png', 'image/jpeg'] // 文章相册允许PNG/JPG
      },
      'api::banner.banner': {
        image: ['image/svg+xml'] // 横幅仅允许SVG
      }
    };

    // 获取当前上传对应的规则，默认全局规则为仅SVG
    const allowedTypes = typeRules[ref]?.[field] || ['image/svg+xml'];
    
    for (const file of files) {
      if (!allowedTypes.includes(file.mime)) {
        throw new Error(`该字段仅支持${allowedTypes.join('、')}格式，当前文件类型：${file.mime}`);
      }
    }

    return await super.upload(files, { user, refId, ref, source, field });
  },
}));

2. 创建自定义上传字段（复用性高） #

如果需要在多个集合中复用「仅SVG上传」的字段，可以创建自定义字段类型：

1. 创建自定义字段插件，在字段的后端验证逻辑中添加MIME类型检查
2. 在前端组件中设置文件选择器的accept属性为image/svg+xml，从源头限制用户选择的文件类型
3. 后续在集合中直接使用该自定义字段，无需重复编写验证逻辑

3. 前端辅助限制（提升用户体验） #

在管理面板中修改上传组件的文件筛选规则，让用户只能看到SVG文件：

• 通过自定义插件扩展Strapi的媒体库组件，将上传按钮的accept属性设置为image/svg+xml
• 该方法仅作为辅助，必须配合后端验证（前端限制可被绕过）

内容的提问来源于stack exchange，提问作者Dionisio Barbosa