mavon-editor上传图片功能

1.html

<mavonEditor
  	ref="md"
   class="newContent"
   :boxShadow = "false"
   :toolbars="toolbarsValue"
   :previewBackground = "'#ffffff'"
   v-model="content"
   :imageFilter = "uploadBefore"
   :externalLink="false"
   @imgAdd="$imgAdd"
   @change="changeMavon"/>

2.引入

import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'

3.methods

export default {
  data () {
	  return {
	  	content: '',
	  	saving: false,
	  	toolbarsValue: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        strikethrough: true, // 中划线
        mark: true, // 标记
        superscript: true, // 上角标
        subscript: true, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        code: true, // code
        table: true, // 表格
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        htmlcode: true, // 展示html源码
        help: true, // 帮助
        /* 1.3.5 */
        undo: true, // 上一步
        redo: true, // 下一步
        trash: true, // 清空
        save: true, // 保存（触发events中的save事件）
        /* 1.4.2 */
        navigation: true, // 导航目录
        /* 2.1.8 */
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        /* 2.2.1 */
        subfield: true, // 单双栏模式
        preview: true, // 预览
      },
  	}
  }
  methods: {
	  uploadBefore(f){
	    if(f.size>2016324){
	       this.gb.msgToast('error', '图片限制大小为2M')
	       return false
	     }else {
	       return true
	     }
  },
	  // 将图片上传到服务器，返回地址替换到md中
	    async $imgAdd (pos, $file) {
	      this.saving = true
	      let res = await uploadFile($file, this.token)
	      if (res.ret_code === 200) {
	        let fullImgPath = this.gb.imgPath(res.result.image_url)
	        this.mdImgMap[pos] = fullImgPath
	        this.$emit('update-imgmap', pos, fullImgPath)
	        this.saving = false
	      } else {
	        this.$refs.md.$refs.toolbar_left.$imgDel(pos)
	        this.gb.msgToast('error', '文件上传失败')
	      }
	    },
	}
}

4.封装图片路径

import {baseUrl, imgBaseUrl, captchaWebKey} from '@/config/env'
import {msgToast} from '@/config/utils.js'
import swal from 'sweetalert2'
import { Message } from 'element-ui';

const local = {}
// 图片地址
local.baseImgUrl = imgBaseUrl
// 图片链接
local.imgPath = function (path, defaultPath = require('@/images/defendImg.png')) {
  if (path) {
    if (path.indexOf('/') === 0) {
      return imgBaseUrl + path
    } else if (path.indexOf('http://') > -1 || path.indexOf('https://') > -1) {
      return path
    } else {
      return imgBaseUrl + '/' + path
    }
  } else {
    return defaultPath
  }
}

5.evn文件

let imgBaseUrl = ''
if (process.env.NODE_ENV === 'development') {
  baseUrl = '/api'
  imgBaseUrl = '//img.dev.sec-in.com'
} else if (process.env.NODE_ENV === 'production') {
  baseUrl = '/api'
  imgBaseUrl = '/img'
}
export {
  imgBaseUrl
}