VUE WangEditor 配置图片上传至服务器
功能需求:在我的实际项目中因wangEditor默认的图片上传的存储方式是base64存储,会导致上传后的图片太大,所以需配置上传本地服务器wangEditor版本:4.7.9话不多说 直接上代码:<template><div><el-form ref="form" :model="form" label-width="150px"><el-form-it
·
功能需求:
在我的实际项目中,因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>
更多推荐
已为社区贡献5条内容
所有评论(0)