keystone.js 백그라운드 편집기에서 이미지 업로드 구현 방법

이 글의 내용은 keystone.js 배경 편집기에서 이미지를 업로드하는 방법에 대한 것입니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

keystone을 사용할 때 문제가 발생했습니다. keystone은 Tinymce를 백그라운드에서 서식 있는 텍스트 편집기로 사용하지만 네트워크 이미지 삽입 기능만 제공하고 로컬 이미지를 업로드하고 관리할 수 없습니다. 다행히 Keystone은 플러그를 추가하는 옵션을 제공합니다. -tinymce용 인

1. 편집기에서 플러그인을 추가합니다

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' }, // 上传图片插件
  }
}

2. 백엔드 API

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;

二、后台API

1. 监听路由

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

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中间件

2. 建立新域来管理图片

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,
    });
  })
}

3. API细节

api/upload_image.js

라우팅 파일에 다음 코드를 추가합니다.

rrreee

API를 api/upload_image.js, 새로운 API에 주목하세요. 추가 API에는 keystone.middleware.api 미들웨어 추가가 필요합니다

2. 이미지를 관리하려면 새 도메인을 생성하세요
models/FileUpload.js:

rrreee

3. API 세부정보 api/upload_image.js구현 세부정보:

rrreee

관련 권장사항:

🎜🎜편집기 ckeditor에게 열어달라고 요청하세요. 이미지 업로드 upload.php 파일 업로드 후 오류🎜🎜🎜🎜🎜드래그 이벤트 편집기 사진 업로드 드래그 앤 드롭 효과 구현🎜🎜🎜🎜

위 내용은 keystone.js 백그라운드 편집기에서 이미지 업로드 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!