Question

与问题https://jsfiddle.net/ocgjrzre/2/非常相似，但我没有使用S3文件，并且该链接中的信息有些过时（由于上述问题中链接的github问题已关闭，因此尚未更新）。

我的问题是如何在Keystonejs的管理员后端预览上传的图片。虽然它似乎是一个hacky修复（编辑上面链接中建议的keystone文件），但我想知道是否还有其他选项。

虽然他们已经添加了对S3文件的支持并且.wrap-button-three.button { margin-bottom: 0; }受到支持，但是当Keystone将其视为上传图片时，我无法预览上传的图片任意文件（不是图像）。

here：正如您所见，Keystone只显示文件名（以红色突出显示）。

模型设置如下：

Types.CloudinaryImage

Answer 1

就我而言，唯一的方法就是自己实现。它不像我的样子那么可怕，但你应该花很多时间来做到这一点。

您需要调查管理页面中现在显示的不同字段类型 - 您应该查看已经提供KeystoneJS的管理页面模板（路径：node_modules \ keystone \ admin \ server \ templates）

之后你可能想要查找（path：node_modules \ keystone \ fields）您可能对TYPES子文件夹感兴趣 - 因为有不同的字段类型规则

所以你的目标是找到相应的字段描述（对于你的ImageUpload FileSystem模型）或创建一个带有img标签的新的描述来显示来自url的图片

我认为文件类型就是您要找的 - \ node_modules \ keystone \ fields \ types \ file

Answer 2

现在可以在keystone的最新主分支中进行图像预览（参见https://github.com/keystonejs/keystone/pull/4509）。目前您需要依赖于keystone的git版本，因此请将其放在package.json并运行npm install：

  "keystone": "https://github.com/keystonejs/keystone.git"

在您的模型中，在相关图片字段中指定thumb: true。您还需要架构中的url属性。例如：

const storage = new keystone.Storage({
    adapter: keystone.Storage.Adapters.FS,
    fs: {
        path: keystone.expandPath('./uploads/images'), 
        publicPath: '/images/'
    },
    schema: {
        url: true,
    }
})

ImageUpload.add({
    name: { type: Types.Key, index: true },
    image: {
        type: Types.File,
        storage: myStorage,
        thumb: true
    },
    createdTimeStamp: { type: String }
});

管理员界面现在应该显示图片的小预览及其链接。

如何在Keystonejs后端显示上传的图像

2 个答案: