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

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

不言

Lepaskan： 2018-09-11 15:35:35

asal

2014 orang telah melayarinya

本篇文章给大家带来的内容是关于keystone.js后台编辑器中上传图片的实现方法，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

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

一、在编辑器中添加插件

1. 上传图片插件

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

2. 配置

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

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

Salin selepas log masuk

二、后台API

1. 监听路由

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

var router = express.Router();
var keystone = require(&#39;keystone&#39;);
var importRoutes = keystone.importer(__dirname);
var routes = {
  api: importRoutes(&#39;./api&#39;),
};
 
router.post(&#39;/api/admin/upload-image&#39;, keystone.middleware.api, routes.api.upload_image);
 
module.exports = router;

Salin selepas log masuk

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

2. 建立新域来管理图片

models/FileUpload.js：

var keystone = require(&#39;keystone&#39;);
var Types = keystone.Field.Types;
 
/**
 * File Upload Model
 * ===========
 * A database model for uploading images to the local file system
 */
 
var FileUpload = new keystone.List(&#39;FileUpload&#39;);
 
var myStorage = new keystone.Storage({
  adapter: keystone.Storage.Adapters.FS,
  fs: {
    path: keystone.expandPath(&#39;public/uploads&#39;), // required; path where the files should be stored
    publicPath: &#39;uploads&#39;, // 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 = &#39;name&#39;;
FileUpload.register();

Salin selepas log masuk

3. API细节

api/upload_image.js实现细节：

var
  keystone = require(&#39;keystone&#39;),
  fs = require(&#39;fs&#39;),
  path = require(&#39;path&#39;);
 
var FileData = keystone.list(&#39;FileUpload&#39;); 
 
module.exports = function (req, res) {
  var
    item = new FileData.model(),
    data = (req.method == &#39;POST&#39;) ? req.body : req.query;
   
  // keystone采用的老版multer来解析文件，根据req.files.file.path将文件从缓冲区复制出来
  fs.copyFile(req.files.file.path, path.join(__dirname, &#39;../../public/uploads&#39;, 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,
    });
  })
}