Heim > Artikel > Web-Frontend > Implementierungsmethode zum Hochladen von Bildern im Hintergrundeditor von keystone.js
Der Inhalt dieses Artikels befasst sich mit der Implementierungsmethode zum Hochladen von Bildern im Hintergrundeditor von keystone.js. Ich hoffe, dass er für Sie hilfreich ist.
Bei der Verwendung von Keystone ist ein Problem aufgetreten: Keystone verwendet Tinymce als Rich-Text-Editor im Hintergrund, bietet jedoch nur die Funktion zum Einfügen von Netzwerkbildern und kann keine lokalen Bilder hochladen und verwalten. Glücklicherweise bietet Keystone Optionen So fügen Sie ein Plug-in für tinymce hinzu
Laden Sie das Plug-in herunter und Legen Sie es im statischen Verzeichnis
Fügen Sie die folgenden Konfigurationselemente in keystone.init()
hinzu:
{ '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;
Wir fügen die API in
ein. Beachten Sie, dass die neue APIMiddlewareapi/upload_image.js
2. Erstellen Sie eine neue Domain, um Bilder zu verwaltenkeystone.middleware.api
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-Detailsmodels/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, }); }) }
Verwandte Empfehlungen: api/upload_image.js
Fragen Sie den Editor. Nach dem Öffnen des Bild-Uploads mit dem ckeditor ist beim Hochladen der Datei upload.php ein Fehler aufgetreten.
Drag Der Ereigniseditor realisiert den Drag-and-Drop-Upload-Bildeffekt
Das obige ist der detaillierte Inhalt vonImplementierungsmethode zum Hochladen von Bildern im Hintergrundeditor von keystone.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!