Keystonejs 4.0 文件系统存储适配器图片预览答案

【问题标题】：Keystonejs 4.0 File system storage adapter image previewKeystonejs 4.0 文件系统存储适配器图片预览
【发布时间】：2017-04-14 05:53:40
【问题描述】：

如何在管理 UI 中获取 Types.File 字段的图像预览。

上面写着“FS adapter supports 所有默认 Keystone 文件架构字段。它还支持并启用文件名路径（必需）。”但是，当我尝试 (doc) 时：

format: function(item, file){
        return '<img src="/files/'+file.filename+'" style="max-width: 300px">'
    }

UI 中没有显示任何内容

【问题讨论】：

标签： keystonejs

【解决方案1】：

据我从 Keystone GitHub 得知，format 函数已经有一段时间没有工作了。我不知道 Keystone 4.0 中是否存在该功能。参考here。

【讨论】：

【解决方案2】：

如果您立即需要，您可以分叉当前的测试版并自行修补功能。

您可以在https://github.com/keystonejs/keystone/blob/v4.0.0-beta.5/fields/types/file/FileType.js#L81找到它

不过，我觉得不合适。我希望他们能在发布 4.0 之前修复它，以及丢失的文件数组类型。

【讨论】：

【解决方案3】：

现在可以在 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 现在应该显示图像的小预览和指向它的链接。

【讨论】：