keystone.js后台编辑器中上传图片的实现方法

使用keystone时遇到一个问题：keystone后台使用tinymce做富文本编辑器，但其只提供了插入网络图片的功能，而不能上传和管理本地图片，好在keystone提供了选项来为tinymce添加插件

一、 在编辑器中添加插件

1. 上传图片插件

下载插件并放到静态目录下

2. 配置

在keystone.init()中增加如下配置项：

{
 'wysiwyg additional plugins': 'uploadimage',
 'wysiwyg additional buttons': 'uploadimage',
 'wysiwyg additional options': {
 'uploadimage_form_url': '/api/admin/upload-image', //上传图片的API
 'relative_urls': false,
 'external_plugins': { 'uploadimage': '/js/uploadimage/plugin.min.js' }, // 上传图片插件
 }
}

二、后台API

1. 监听路由

在路由文件中增加如下代码：

var router = express.Router();
var keystone = require('keystone');
var importRoutes = keystone.importer(__dirname);
var routes = {
 api: importRoutes('./api'),
};

router.post('/api/admin/upload-image', keystone.middleware.api, routes.api.upload_image);

module.exports = router;

我们将API放到api/upload_image.js中，注意新增的API需要添加keystone.middleware.api中间件

2. 建立新域来管理图片

models/FileUpload.js：

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

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

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

var myStorage = new keystone.Storage({
 adapter: keystone.Storage.Adapters.FS,
 fs: {
 path: keystone.expandPath('public/uploads'), // required; path where the files should be stored
 publicPath: 'uploads', // path where files will be served
 }
});

FileUpload.add({
 name: { type: Types.Key, index: true},
 file: {
 type: Types.File,
 storage: myStorage
 },
 createdTimeStamp: { type: String },
 alt1: { type: String },
 attributes1: { type: String },
 category: { type: String }, //Used to categorize widgets.
 priorityId: { type: String }, //Used to prioritize display order.
 parent: { type: String },
 children: { type: String },
 url: {type: String},
 fileType: {type: String}

});


FileUpload.defaultColumns = 'name';
FileUpload.register();

3. API细节

api/upload_image.js实现细节：

var
 keystone = require('keystone'),
 fs = require('fs'),
 path = require('path');

var FileData = keystone.list('FileUpload'); 

module.exports = function (req, res) {
 var
 item = new FileData.model(),
 data = (req.method == 'POST') ? req.body : req.query;
 
 // keystone采用的老版multer来解析文件，根据req.files.file.path将文件从缓冲区复制出来
 fs.copyFile(req.files.file.path, path.join(__dirname, '../../public/uploads', req.files.file.name), function (err) {
 var sendResult = function () {
 if (err) {
 res.send({ error: { message: err.message } });
 } else {
 // 按插件要求的返回格式返回URL
 res.send({ image: {
 url: "\/uploads\/" + req.files.file.name
 } });
 }
 };

 // TinyMCE upload plugin uses the iframe transport technique
 // so the response type must be text/html
 res.format({
 html: sendResult,
 json: sendResult,
 });
 })
}