VUE WangEditor 配置图片上传至服务器

功能需求：
在我的实际项目中，因wangEditor默认的图片上传的存储方式是base64存储，会导致上传后的图片太大，所以需配置上传本地服务器，
亲测有效！！

wangEditor版本：4.7.9

话不多说 直接上代码：

<template>
	<div>
	 <el-form ref="form" :model="form" label-width="150px">
	 	//多于代码已省略
	    <el-form-item label="文本内容" prop="content" class="content">
	      <div id="editor" ref="editor" />
	    </el-form-item>
	  </el-form>
	</div>
</template>
<script>
import E from 'wangeditor'
import { getToken } from '@/utils/auth'
export default {
data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API + '接口路径',
      editorContent: '',
      form: {}
      }
    },
 mounted() {
  this.wangeditor()
  },
  methods:{
// 富文本配置
    wangeditor() {
      const editor = new E(this.$refs.editor)
      // 删除上传视频功能
      editor.config.menus.splice(18, 1)
      // 删除添加表情功能
      editor.config.menus.splice(16, 1)
      // 隐藏全屏
      editor.config.showFullScreen = false
      // 上传图片
      editor.config.uploadImgShowBase64 = false //如果为true，则不用配置下面的
      //-----
      editor.config.uploadImgServer = this.baseUrl// 这是服务器端上传图片的接口路径
      editor.config.uploadFileName = 'file'// 后端接受上传文件的参数名
      editor.config.uploadImgHeaders = { 'Authorization': 'Bearer ' + getToken() }// 设置请求头
      editor.config.uploadImgHooks = {
        customInsert: function(insertImg, result, editor) {
          var url = process.env.VUE_APP_BASE_API + result.data.filePath  //当前result.data.filePath为后端返回的半截路径，如果为全路径 则不用拼
          insertImg(url)
        }
      }
	//------
      // 上传图片大小 5M
      editor.config.uploadImgMaxSize = 5 * 1024 * 1024
      // // 隐藏插入网络图片的功能
      editor.config.showLinkImg = false
      // // 改变内容触发回调函数
      editor.config.onchange = this.editorCallBack
      // // 配置触发 onchange 的时间频率，默认为 200ms
      editor.config.onchangeTimeout = 500 // 修改为 500ms
      editor.create()
      // 回显已有内容
      editor.txt.html(this.editorContent)
    },
    // wangeditor回调函数
    editorCallBack(newHtml) {
      this.form.content = newHtml
    },
  }
  
}
</script>