2018.07.02 18:39

quill-image-extend-module富文本上传图片到服务器

quill-image-extend-module 是 vue-quill-editor的增强模块,本文以本博客的后端接口为例说明用法


当不使用这个增强模块的时候 图片上传的默认是base64 这对于post 参数 有额外的配置 传递参数过大 报错413(可以通过下面设置解决)


注意:不推荐这样使用这样会导致post请求非常耗时

//app.use(bodyParser.urlencoded({ extended: false }));
//app.use(bodyParser.json());

//post request entity too large 413错误解决
app.use(bodyParser.json({
  limit: '50mb'
}));
app.use(bodyParser.urlencoded({
  limit: '50mb',
  extended: false 
}));



Install

npm install quill-image-extend-module  vue-quill-editor  --save


use

import {quillEditor, Quill} from 'vue-quill-editor'
import {container, ImageExtend, QuillWatch} from 'quill-image-extend-module'

Quill.register('modules/ImageExtend', ImageExtend)


example

<template>
  <div class="quill-wrap">
   <quill-editor ref="editer"  :options="form.editorOption" v-model="form.content"></quill-editor>
    </quill-editor>
  </div>
</template>
<script>
  import {quillEditor, Quill} from 'vue-quill-editor'
  import {container, ImageExtend, QuillWatch} from 'quill-image-extend-module'

  Quill.register('modules/ImageExtend', ImageExtend)
  export default {
    components: {quillEditor},
    data() {
      return {
          form: {
          type: '',
          title: '',
          creat_date:null,
          placeholder_img: '',
          background_img:'',
          content: '',
            // 富文本框参数配置  详见github   quill-image-extend-module
          editorOption:{
            modules: {
              ImageExtend: {
                size: 2,                 // 可选参数 图片大小,单位为M,1M = 1024kb 请用整数不要浮点
                name: 'single',            // 图片参数名  后端需要的传参名
                action: 'http://localhost:8080/api/article/upload', // 服务器地址, 如果action为空,则采用base64插入图片
                response: (res) => {
                  console.log('图片接收',res.url[0])
                  let _r =''
                  if (res.code == 200){
                    _r = res.url[0]
                  }else {
                    this.$message.error('提示信息:' + res.message)
                  }
                  return _r
                },
                // 图片超过大小的回调
                sizeError: () => {
                  this.$message.error('提示信息: 上传图片超过'+this.editorOption.modules.ImageExtend.size+'M')
                },
              },
              toolbar: {   // 如果不上传图片到服务器,此处不必配置
                container: container,  // container为工具栏,此次引入了全部工具栏,也可自行配置
                handlers: {
                  'image': function () {  // 劫持原来的图片点击按钮事件
                    QuillWatch.emit(this.quill.id)
                  }
                }
              }
            }
          }
        }
      }
    }
  }
</script>



后端上传接口核心代码


const express = require("express");
const router = express.Router();
const multer = require('multer');
const destUploadDir = __dirname + '../../../../static/uploads/' //(使用__dirname 解决路径找不到上传到打包路径)
const baseUrlImg = "http://localhost:9000/static/uploads/"
//判断增强版本
const storage = multer.diskStorage({
 //设置上传后文件路径,uploads文件夹会自动创建
 destination: function(req, file, cb) {
  cb(null, destUploadDir);
 },
 //给上传文件重命名,获取添加后缀名
 filename: function (req, file, cb) {
   let fileFormat = (file.originalname).split(".");
   cb(null, file.fieldname + '-' + Date.now() + "." + fileFormat[fileFormat.length - 1]);
  }
});

const fileFilter = (req, file, cb) => {
 // reject a file
 if (file.mimetype === 'image/jpeg' || file.mimetype === 'image/png') {
  cb(null, true);
 } else {
  cb(null, false);
 }
};

const upload = multer({
 storage: storage,
 limits: {
  fileSize: 1024 * 1024 * 5
 },
 fileFilter: fileFilter
});



//这样可以的上传(本地开发ok的)
router.post('/upload', upload.single("single"), function(req, res, next){
     console.log(req.file)
     let filepath = destUploadDir + req.file.originalname;
     fs.renameSync(req.file.path,filepath);
     res.json({
      "code":200,
      "data":"",
      "msg":"上传成功",
      "url":[baseUrlImg+req.file.originalname]
     })
});


上传的图片name name: 'single',   不能为file 否则 multer 的上传报错500  message: "Unexpected field" 导致上传图片失败


此时上传的富文本 img拿到是服务器上的地址标签,而不是base64编码,(base64编码对mongodb存储不友好,不推荐)




DIY表情

(添加http或https协议)

提交评论