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>

最后

以上就是外向香水为你收集整理的VUE WangEditor 配置图片上传至服务器的全部内容，希望文章能够帮你解决VUE WangEditor 配置图片上传至服务器所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。