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

【问题标题】：How to show uploaded image in Keystonejs back-end如何在 Keystonejs 后端显示上传的图像
【发布时间】：2018-02-21 11:11:43
【问题描述】：

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

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

虽然他们添加了对 S3 文件的支持并且支持 Types.CloudinaryImage，但当它只是上传的图像时，我无法预览上传的图像，因为 Keystone 将其视为任意文件（而不是图像）。

Screenshot: 如您所见，Keystone 仅显示文件名（以红色突出显示）。

模型设置如下：

var keystone = require('keystone');
var Types = keystone.Field.Types;

/**
 * Image Upload Model
 * ==================
 * A database model for uploading images to the local file system
 */

var ImageUpload = new keystone.List('ImageUpload');

var myStorage = new keystone.Storage({
        adapter: keystone.Storage.Adapters.FS,
        fs: {
                path: keystone.expandPath('./public/uploads/images'),
                publicPath: '/public/uploads/images',
        }
});

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


ImageUpload.defaultColumns = 'url, createdTimeStamp, image';
ImageUpload.register();

【问题讨论】：

标签： node.js mongodb keystonejs

【解决方案1】：

据我所知，唯一的方法是自己实现。它不像我的样子那么可怕，但你应该花很多时间去做。

您需要研究目前不同的文件类型如何在管理页面中显示 - 为此您应该查看 KeystoneJS 已经提供的管理页面模板（路径：node_modules\keystone\admin\server\templates）

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

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

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

【讨论】：

【解决方案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 }
});

管理 UI 现在应该显示图像的小预览和指向它的链接。

【讨论】：