如何使用mongoose express配置tinymce图像上传?并希望能够实现这一目标

时间:2018-04-12 15:48:54

标签: express mongoose tinymce cloudinary

https://www.tinymce.com/docs/configure/file-image-upload/

这是我将图像从表格中提取到cloudinary中的设置,但我无法弄清楚如何将图像从tinymce中获取到req.body中,或者即使可能的话?

我可以使用tinymce.init({})tinymce.activeEditor.uploadImages()甚至是tinymce.activeEditor.uploadImages(function(success) {})吗?

模式

const mongoose = require('mongoose');
mongoose.Promise = global.Promise;

const docSchema = new mongoose.Schema({
  image_url: [String],
});
module.exports = mongoose.model('Doc', docSchema);

形式

form(action="/add" method="POST" class="card" enctype="multipart/form-data")
  label(for="image") image: 
  input(type="file" multiple='multiple' name="image" id="image" accept="image/gif, image/png, image/jpeg")

路由/ index.js

const express = require('express');
const router = express.Router();
const myController = require('../controllers/myController');

router.get('/', myController.showDocs);
router.get('/add', myController.addDoc);

router.post('/add',
  myController.upload,
  myController.imageURL,
  myController.createDoc
);

module.exports = router;

myControllers.js

const mongoose = require('mongoose');
const Doc = mongoose.model('Doc');
const multer = require('multer');
const jimp = require('jimp');
const cloudinary = require('cloudinary');
const cloudinaryStorage = require('multer-storage-cloudinary');


cloudinary.config({
  cloud_name: process.env.CLOUD_NAME,
  api_key: process.env.CLOUD_API_KEY,
  api_secret: process.env.CLOUD_SECRET
});

const storage = cloudinaryStorage({
  cloudinary: cloudinary,
  folder: 'node_upload',
  allowedFormats: ['jpg', 'png'],
  filename: function (req, file, cb) {
    cb(undefined, uuid.v4());
  }
});
const multerOptions = {
  storage: storage,
  fileFilter(req, file, next) {
    const image = file.mimetype.startsWith('image/');
    if(image) {
      next(null, true);
    } else {
      next({ message: 'That filetype isn\'t allowed!' }, false);
    }
  }
};
exports.upload = multer(multerOptions).array('image');

exports.imageURL = (req, res, next) => {
  if (!req.files) {
    next(); // skip to the next middleware
    return;
  }
  image_url = [];
  for (var i = 0; i < req.files.length; i++) {
      image_url.push(req.files[i].url)
  }
  req.body.image_url = image_url;
  next();
}


exports.createDoc= async (req, res) => {
  const doc = new Doc(req.body);
  await doc.save();
  res.redirect('/');
};

1 个答案:

答案 0 :(得分:0)

如果您将二进制图像(Base64,BLOB等)插入TinyMCE,您可以配置编辑器将其发送到任何您喜欢的地方。这个过程记录在这里:

Viewapger image

有多种方法可以将图像注入TinyMCE,包括粘贴和通过文件选择器。在插入图像后配置TinyMCE来解决此问题意味着无论图像如何进入编辑器,您只需要处理一次。