配置wangEditor 实现图片上传

首先新建editor.vue文件，用于写配置项

方法1：使用 base64 编码直接将图片插入到内容中

优点：配置简单

this.editor.customConfig.uploadImgShowBase64 = true

缺点：上传图片过大或上传多张图片，字段可能会保存失败（被截断），不完整，大图无法显示在富文本框等问题
如果项目中不想做图片限制可以用下面的方法，直接上传到后端服务器

方法2：将图片上传到后端服务器

关键代码：

    // 配置服务器端地址 upload:上传图片地址
    editor.customConfig.uploadImgServer = '/upload'
    //可使用监听函数在上传图片的不同阶段做相应处理
    editor.customConfig.uploadImgHooks = {
    before: function (xhr, editor, files) {
        // 图片上传之前触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件
        // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
        // return {
        //     prevent: true,
        //     msg: '放弃上传'
        // }
    },
    success: function (xhr, editor, result) {
        // 图片上传并返回结果，图片插入成功之后触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
    },
    fail: function (xhr, editor, result) {
        // 图片上传并返回结果，但图片插入错误时触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
    },
    error: function (xhr, editor) {
        // 图片上传出错时触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
    },
    timeout: function (xhr, editor) {
        // 图片上传超时时触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
    },
    // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
    // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
    customInsert: function (insertImg, result, editor) {
        // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
        // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
        // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
        var url = result.url
        insertImg(url)
        // result 必须是一个 JSON 格式字符串！！！否则报错
    }
    }
}

实例：

<template>
    <div class="editor-wrapper">
        <div :id="editorId"></div>
    </div>
</template>

<script>
    import {BASE_URL} from '@/libs/util.js';
    import Editor from 'wangeditor'
    import 'wangeditor/release/wangEditor.min.css'
    import {oneOf} from '@/libs/tools'
    import {Message} from 'iview';

    export default {
        name: 'Editor',
        data() {
            return {
               //我自己的上传地址
                upload: BASE_URL + 'admin_api/utils/upload_image',
            }
        },
        props: {
            value: {
                type: String,
                default: ''
            },
            /**
             * 绑定的值的类型, enum: ['html', 'text']
             */
            valueType: {
                type: String,
                default: 'html',
                validator: (val) => {
                    return oneOf(val, ['html', 'text'])
                }
            },
            /**
             * @description 设置change事件触发时间间隔
             */
            changeInterval: {
                type: Number,
                default: 200
            },
            /**
             * @description 是否开启本地存储
             */
            cache: {
                type: Boolean,
                default: false
            }
        },
        computed: {
            editorId() {
                return `editor${this._uid}`
            }
        },
        methods: {
            setHtml(val) {
                this.editor.txt.html(val)
            }
        },
        mounted() {
            this.editor = new Editor(`#${this.editorId}`)
            this.editor.customConfig.onchange = (html) => {
                let text = this.editor.txt.text()
                if (this.cache) localStorage.editorCache = html
                this.$emit('input', this.valueType === 'html' ? html : text)
                this.$emit('on-change', html, text)
            }
            this.editor.customConfig.uploadFileName = 'myFile';
            // this.editor.customConfig.uploadImgMaxSize =5 * 1024 * 1024  //控制图片大小 
            this.editor.customConfig.onchangeTimeout = this.changeInterval
            this.editor.customConfig.uploadFileName = 'file'  //上传参数 自定义
            this.editor.customConfig.uploadImgServer = this.upload   //上传图片
            this.editor.customConfig.uploadImgHooks = {  //监听
                before: function (xhr, editor, files) {
                    // 图片上传之前触发
                },
                success: function (xhr, editor, result) {
                    // 图片上传并返回结果，图片插入成功之后触发
                },
                fail: function (xhr, editor, result) {
                    Message.error('插入图片失败！')
                },
                error: function (xhr, editor) {
                    Message.error('插入图片失败！')
                },
                timeout: function (xhr, editor) {
                    Message.error('插入图片失败！')
                },
                customInsert: function (insertImg, result, editor) {
                    var url = result.prefix + result.path
                    insertImg(url)
                }
            }
            this.editor.create()
            let html = this.value || localStorage.editorCache
            if (html) this.editor.txt.html(html)
        }
    }
</script>

以上。