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) {

// 图片上传并返回结果，图片插入成功之后触发

// 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 格式字符串！！！否则报错

}

}

}

实例：

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)

}

}

以上。