本篇文章给大家带来的内容是关于keystone.js后台编辑器中上传图片的实现方法，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
使用keystone时遇到一个问题：keystone后台使用tinymce做富文本编辑器，但其只提供了插入网络图片的功能，而不能上传和管理本地图片，好在keystone提供了选项来为tinymce添加插件
下载插件并放到静态目录下
在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' }, // 上传图片插件
}
}在路由文件中增加如下代码：
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中间件
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();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,
});
})
}相关推荐：
请教编辑器ckeditor开启图片上传后 upload.php文件上传出错
以上是keystone.js后台编辑器中上传图片的实现方法的详细内容。更多信息请关注PHP中文网其他相关文章！
