KeystoneJS如何在上传Cloudinary前后创建多尺寸图片版本？

当然有啦！Keystone搭配Cloudinary本身就自带类似Paperclip的多尺寸图片生成能力，完全能满足你的需求，我给你一步步讲怎么实现：

1. 直接在模型字段中配置转换规则 #

你可以扩展Types.CloudinaryImage的配置项，通过cloudinary.transformations指定要生成的三种尺寸规则，上传图片时Cloudinary会自动帮你生成对应版本的图片。

修改你的模型代码如下：

MyModel.add({
  image: {
    type: Types.CloudinaryImage,
    autoCleanup: true,
    cloudinary: {
      transformations: [
        // 缩略图：200x200填充裁剪，保证尺寸精准
        { width: 200, height: 200, crop: 'fill', quality: 80, format: 'webp', folder: 'my-model/thumbnails' },
        // 常规图：最大宽度800px，按比例缩放不裁剪
        { width: 800, crop: 'limit', quality: 85, format: 'webp', folder: 'my-model/regular' },
        // 大图：最大宽度1200px，保留高清质量
        { width: 1200, crop: 'limit', quality: 90, format: 'webp', folder: 'my-model/large' }
      ]
    }
  }
});

这里给你解释几个关键参数：

• crop：fill是强制填充目标尺寸（会裁剪多余部分），limit是按比例缩放保留完整图片
• format：推荐用webp格式，比jpg/png体积小一半以上，兼容性也很好
• folder：可选，把不同尺寸的图片分类存到Cloudinary的对应文件夹，方便管理

2. 在代码/模板中调用不同尺寸的图片 #

上传完成后，Keystone会把所有转换后的图片URL存在字段的transformations数组里，你可以直接调用：

// 假设拿到了MyModel的实例item
const thumbnailUrl = item.image.transformations[0].url;
const regularUrl = item.image.transformations[1].url;
const largeUrl = item.image.transformations[2].url;

如果用Handlebars模板的话，可以这么写：

<img src="{{item.image.transformations.0.url}}" alt="缩略图">
<img src="{{item.image.transformations.1.url}}" alt="常规图">
<img src="{{item.image.transformations.2.url}}" alt="大图">

3. 进阶：用Cloudinary上传预设统一管理规则 #

如果多个模型都需要相同的尺寸规则，推荐在Cloudinary后台创建上传预设，这样不用每个模型都写重复代码：

1. 登录Cloudinary后台，进入Settings > Upload > Upload Presets，创建新预设并配置好你的三种尺寸转换规则
2. 在Keystone的配置文件（比如keystone.js）里绑定这个预设：

keystone.set('cloudinary config', {
  cloud_name: '你的Cloudinary云名称',
  api_key: '你的API密钥',
  api_secret: '你的API密钥密码',
  upload_preset: '你创建的预设名称'
});

之后模型字段就可以简化成：

MyModel.add({
  image: {
    type: Types.CloudinaryImage,
    autoCleanup: true
  }
});

上传时会自动应用预设里的所有转换规则，生成对应尺寸的图片版本。

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