How to show uploaded image in Keystonejs back-end

问题

Very similar to problem here but I'm not using S3 files and the info in that link is somewhat dated (hasn't been updated since github issues linked from question above were closed).

My question is about how to get a preview of an uploaded image in Keystonejs's admin back-end. Although it seems like it's a hacky fix (editing keystone files as suggested in link above) I'm wondering if there's other options.

Although they've added support for S3 files and Types.CloudinaryImage is supported I can't get a preview of the uploaded image when it's just an uploaded image since Keystone treats it as an arbitrary file (not an image).

Screenshot: as you can see Keystone just shows the filename (highlighted in red).

Model is set up as follows:

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();

回答1:

As far as I get it the only way - is to implement this by yourself. It's not so scary as it my look but you should spend a lot of time to do that.

You need to investigate how for now different filed types are showed in admin page - for that you should take a look at template for admin page which is provided with KeystoneJS already (path: node_modules\keystone\admin\server\templates)

After that you might want to look for (path: node_modules\keystone\fields) You might be interested in TYPES subfolder - cause there different field types rules

So your goal is to find corresponding field description (for your ImageUpload FileSystem model) or create a new one with img tag to show picture from url

I think File type is that what you are looking for - \node_modules\keystone\fields\types\file

回答2:

Image previews are now possible in the latest master branch of keystone (see https://github.com/keystonejs/keystone/pull/4509). At the moment you need to depend on the git version of keystone, so put this in your package.json and run npm install:

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

In your model, specify thumb: true on the image field in question. You also need the url property in the schema. For example:

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 }
});

The admin UI should now show a small preview of the image and a link to it.

来源：https://stackoverflow.com/questions/46185705/how-to-show-uploaded-image-in-keystonejs-back-end

标签

node.js

mongodb

keystonejs