この記事の内容はkeystone.jsバックグラウンドエディターでの画像アップロードの実装方法についてです。必要な方は参考にしていただければ幸いです。
keystone を使用するときに問題が発生しました。keystone はバックグラウンドで tinymce をリッチ テキスト エディターとして使用しますが、ネットワーク画像を挿入する機能のみを提供し、ローカル画像をアップロードして管理することはできません。幸いなことに、keystone にはプラグを追加するオプションが用意されています。 tinymce の -ins
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' }, // 上传图片插件 } }
1. ルーティングを監視します keystone.init()
中增加如下配置项:
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;
在路由文件中增加如下代码:
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放到api/upload_image.js
中,注意新增的API需要添加keystone.middleware.api
中间件
models/FileUpload.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, }); }) }
api/upload_image.js
rrreee
API を api/upload_image.js に注意してください。追加の API にはkeystone.middleware.api
ミドルウェアを追加する必要があります 2. 画像を管理するための新しいドメインを作成します models/FileUpload.js
:
3. API の詳細 api/upload_image.js
実装の詳細:
関連する推奨事項:
🎜🎜エディター ckeditor に開くよう依頼する画像アップロード Upload.php ファイルアップロード後のアップロードエラー🎜🎜🎜🎜🎜 ドラッグイベントエディター 写真アップロードのドラッグアンドドロップ効果を実現🎜🎜🎜🎜以上がkeystone.jsバックグラウンドエディタで画像をアップロードする実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。