VUE + WangEditor 自定义上传图片方法

场景： WangEditor 富文本插件默认图片上传上去的格式是base64位的，

                但是如果本地图片原始大小为1M，转成base64的话，就会变大，

                所以改成上传至自己服务器

                或者要求必须将图片传至自己服务器

 下载使用方式：

        官网地址：Introduction · wangEditor 用户文档

        一、下载WangEditor 插件：npm i wangeditor --save

        二、在页面上定义一个文本域标签

                

<el-form-item label="图文说明" :required="true" v-loading="wangeditorLoading" element-loading-text="拼命上传中">
   <div id="e"></div>
</el-form-item>

        还可以给上传图片时，加上传中的效果

                wangeditorLoading：上传中的初始状态

        element-loading-text：状态底部的文字

        

        三、导入：

import E from "wangeditor";

                 

四、初始化 及使用方式完整代码：

在data中定义上传中效果的初始状态：
     wangeditorLoading:false,

mounted() {
        this.$nextTick(() => {
            this.initE();
            this.editor.txt.html(this.desc);
        })
    },
methods: {
    initE() {
			var that = this;
            this.editor = new E("#e");
            //这里各位小伙伴可以查询官网，根据自己的需求进行菜单栏调整
            this.editor.config.menus = [
                "head", // 标题
                "bold", // 粗体
                "fontSize", // 字号
                "fontName", // 字体
                "italic", // 斜体
                "underline", // 下划线
                "strikeThrough", // 删除线
                "foreColor", // 文字颜色
                "backColor", // 背景颜色
                "link", // 插入链接
                "list", // 列表
                "justify", // 对齐方式
                "quote", // 引用
                "emoticon", // 表情
                "image", // 插入图片
                "table", // 表格
                "undo", // 撤销
                "redo", // 重复
            ];
            this.editor.config.uploadImgMaxSize = 10 * 1024 * 1024 // 10M
            //this.editor.config.uploadImgShowBase64 = true // base 64 存储图片
            this.editor.config.uploadImgTimeout = 15 * 1000//即上传接口等待的最大时间,默认是 10 秒钟，
            this.editor.config.uploadImgMaxLength = 1; // 限制一次最多上传 1 张图片
            this.editor.config.showLinkImg = false; //隐藏网络图片上传
            自定义上传图片-S
            //这里各位小伙伴可以查询官网，根据自己的需求进行菜单栏调整
			this.editor.config.uploadFileName = 'file';
			this.editor.config.uploadImgServer =process.env.BASE_API + '/common/upload'; //图片上传地址
			this.editor.config.uploadImgHooks = {
				before: function(xhr, editor, files) {
                    if(files.length!=0){
                        that.wangeditorLoading=true
                    }
					// 图片上传之前触发
					// xhr 是 XMLHttpRequst 对象，editors 是编辑器对象，files 是选择的图片文件
					// 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
					// return {
					//     prevent: true,
					//     msg: '放弃上传'
					// }
				},
				success: function(xhr, editor, result) {
                    console.log('success')
					// 图片上传并返回结果，图片插入成功之后触发
					// xhr 是 XMLHttpRequst 对象，editors 是编辑器对象，result 是服务器端返回的结果
				},
				fail: function(xhr, editor, result) {
                    console.log('fail')
					// 图片上传并返回结果，但图片插入错误时触发
					// xhr 是 XMLHttpRequst 对象，editors 是编辑器对象，result 是服务器端返回的结果
				},
				error: function(xhr, editor) {
                    console.log('error')
					// 图片上传出错时触发
					// xhr 是 XMLHttpRequst 对象，editors 是编辑器对象
				},
				timeout: function(xhr, editor) {
                    console.log('timeout')
					// 图片上传超时时触发
					// xhr 是 XMLHttpRequst 对象，editors 是编辑器对象
				},

				// 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
				// （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
				customInsert: function(insertImg, result, editor) {
                    that.wangeditorLoading=false
					// 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
					// insertImg 是插入图片的函数，editors 是编辑器对象，result 是服务器端返回的结果

					// 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
					console.log('上传了图片：',result.data);
					// var url = that.$imageUrlVerify(result.data)
                    var url =process.env.VUE_APP_IMG +result.data[0].path;
					insertImg(url);
					// result 必须是一个 JSON 格式字符串！！！否则报错
				}
			};
            自定义上传图片-E
            this.editor.config.onchange = (html) => {
                this.graphicDescription = html; // 绑定当前逐渐地值
                // console.log(this.graphicDescription, "this.graphicDescription")
            };
            this.editor.config.placeholder = '请完善商品详情'//默认值
            this.editor.create();
        },
    
}