wangeditor php上传本地图片,配置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) {

// 图片