Предварительный просмотр образа адаптера хранилища файловой системы Keystonejs 4.0

Как получить предварительный просмотр изображения для поля Types.File в пользовательском интерфейсе администратора.

В нем говорится: «Адаптер FS поддерживает все стандартные Поля схемы файла Keystone. Он также дополнительно поддерживает и включает путь к имени файла (обязательно). Однако, когда я пытаюсь (doc):

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

Ничего не отображается в пользовательском интерфейсе


keystonejs
person doneDone    schedule 30.11.2016    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Насколько я могу судить по Keystone GitHub, функция format какое-то время не работала. Я не знаю, существует ли эта функция в Keystone 4.0. См. здесь.

person Shea Hunter Belsky    schedule 29.12.2016

arrow_upward
1
arrow_downward

Вы можете разветвить текущую бета-версию и исправить функцию самостоятельно, если вам это нужно немедленно.

Вы можете найти его по адресу https://github.com/keystonejs/keystone/blob/v4.0.0-beta.5/fields/types/file/FileType.js#L81

Хотя мне это не кажется правильным. Я надеюсь, что они исправят это до выпуска 4.0 вместе с отсутствующим типом File Array.

person Boyan    schedule 22.03.2017

arrow_upward
1
arrow_downward

Предварительный просмотр изображений теперь возможен в последней основной ветке keystone (см. https://github.com/keystonejs/keystone/pull/4509). На данный момент вам нужно полагаться на git-версию keystone, поэтому поместите это в свой 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 }
});

Пользовательский интерфейс администратора теперь должен отображать небольшой предварительный просмотр изображения и ссылку на него.

person htor    schedule 20.04.2018