如何在Keystone.js（v6）中创建多图片输入字段并存储？

1. 核心做法：用关联模型实现多图片上传 #

Keystone v6没有原生的多图片字段，最靠谱的方式是单独建一个Image模型，然后在需要多图片的目标模型里，用relationship字段建立一对多关联，这样就能管理多张图片了。

2. 配置存储服务（本地/S3二选一） #

先在Keystone的配置文件里定义存储适配器，不管选本地还是S3，步骤类似：

本地存储配置 #

import { config } from '@keystone-6/core';
import { storage } from '@keystone-6/core';
import { fileSystemStorage } from '@keystone-6/file-system';

// 配置本地图片存储
const localImageStorage = storage({
  kind: 'file',
  storage: fileSystemStorage({
    // 前端访问图片的路由前缀
    serverRoute: { path: '/images' },
    // 本地磁盘的存储路径，确保目录存在且有读写权限
    storagePath: 'public/images',
  }),
  // 生成图片访问URL的逻辑
  generateUrl: (path) => `/images${path}`,
  uploadParams: ({ filename }) => ({ filename }),
});

S3存储配置 #

import { config } from '@keystone-6/core';
import { storage } from '@keystone-6/core';
import { s3Storage } from '@keystone-6/s3';

// 配置S3图片存储
const s3ImageStorage = storage({
  kind: 'file',
  storage: s3Storage({
    bucket: '你的S3桶名称',
    region: '你的S3区域（比如us-east-1）',
    accessKeyId: process.env.S3_ACCESS_KEY, // 从环境变量取密钥，别硬编码
    secretAccessKey: process.env.S3_SECRET_KEY,
    folder: 'product-images', // 可选：S3里的文件夹前缀
  }),
  // 生成S3图片的访问URL
  generateUrl: ({ filename, bucket, region }) =>
    `https://${bucket}.s3.${region}.amazonaws.com/${filename}`,
  uploadParams: ({ filename }) => ({
    ACL: 'public-read', // 根据需求设置文件权限
    key: filename,
  }),
});

3. 创建独立的Image模型 #

用上面配置好的存储适配器，定义专门的图片模型：

import { list } from '@keystone-6/core';
import { image, text } from '@keystone-6/core/fields';

export const Image = list({
  fields: {
    // 图片文件字段，指定存储适配器
    imageFile: image({
      storage: localImageStorage, // 要换S3的话改成s3ImageStorage就行
      previewUrl: (data) => data.imageFile?.url, // 后台预览用的URL
    }),
    // 可选：给图片加描述字段，方便管理
    description: text(),
  },
});

4. 在目标模型中关联多张图片 #

比如你有个Product模型需要多张图，就用relationship字段开启多关联：

import { list } from '@keystone-6/core';
import { text, relationship } from '@keystone-6/core/fields';

export const Product = list({
  fields: {
    name: text({ validation: { isRequired: true } }),
    // 关联多张Image
    images: relationship({
      ref: 'Image', // 关联到刚才的Image模型
      many: true, // 开启多图片关联
      // 后台UI优化，让图片管理更直观
      ui: {
        displayMode: 'cards',
        cardFields: ['imageFile', 'description'],
        inlineCreate: { fields: ['imageFile', 'description'] },
        inlineEdit: { fields: ['imageFile', 'description'] },
      },
    }),
  },
});

5. 几点注意事项 #

• 本地存储时，要确保storagePath对应的目录已经创建，并且Keystone进程有读写权限
• S3存储要提前建好Bucket，配置好正确的跨域和IAM权限，密钥别硬编码到代码里，用环境变量管理
• 如果需要控制图片展示顺序，可以给Image模型加个order数字字段，查询时按这个字段排序

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