vue-quill-editor 图片上传处理
vue-quill-editor 将图片转为base64编码,当图片比较大时,提交后台时参数过长,导致提交失败。把富文本内的图片动态上传到服务器,然后把图片加载到富文本编辑器。这样一来,图片标签内只需要存储图片的网络地址。<template><div class="quill-editor"><!-- 图片上传组件辅助--><el-upload class
·
vue-quill-editor 上传图片是将图片转为base64编码,当图片比较大时,提交到后台时参数过长会导致提交失败。如下图:
解决方法:
把富文本内的图片动态上传到服务器,然后把图片加载到富文本编辑器。这样一来,图片标签内只需要存储图片的网络地址就可以了。
具体实现:
(1)组件内调用element的upload组件和vue-quill-editor编辑器;
<template>
<div class="quill-editor">
<!-- 图片上传组件辅助,组件内添加v-show=“false”属性,把该组件隐藏起来。-->
<el-upload class="avatar-uploader" :action="uploadUrl" name="img" :show-file-list="false" :on-success="uploadSuccess" :before-upload="beforeUpload">
</el-upload>
<!--富文本编辑器组件-->
<quill-editor v-model="content" :content="content" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @ready="onEditorReady($event)" ref="QuillEditor">
</quill-editor>
<div v-html="content" />
</div>
</template>
(2)在data函数内,设置upoad组件的图片上传接口地址;处理函数中匹配 image,定义富文本编辑器内的图片上传按钮点击事件,当点击上传图片图标时,触发 upoad 组件的图片上传事件;
handlers: {
image: function (value) {
if (value) {
// 调用element的图片上传组件
document.querySelector('.avatar-uploader input').click()
} else {
this.quill.format('image', false)
}
}
}
(3)methods中,完善 upload图片上传成功事件。图片上传成功后,把图片加载到富文本编辑器内。
uploadSuccess (res) {
// 获取富文本组件实例
let quill = this.$refs.QuillEditor.quill
// 如果上传成功
if (res.code === 100 && res.result) {
// 获取光标所在位置
let length = quill.getSelection().index;
// 插入图片,res为服务器返回的图片链接地址
quill.insertEmbed(length, 'image', res.result[0].url)
// 调整光标到最后
quill.setSelection(length + 1)
} else {
// 提示信息,需引入Message
this.$message.error('图片插入失败!')
}
}
效果如下:
完整版代码:
<template>
<div class="quill-editor">
<!-- 图片上传组件辅助-->
<el-upload class="avatar-uploader" :action="uploadUrl" name="img" :show-file-list="false" :on-success="uploadSuccess" :before-upload="beforeUpload">
</el-upload>
<!--富文本编辑器组件-->
<quill-editor v-model="content" :content="content" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @ready="onEditorReady($event)" ref="QuillEditor">
</quill-editor>
<div v-html="content" />
</div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
const toolbarOptions = [
['bold', 'italic', 'underline', 'strike'], // 加粗,斜体,下划线,删除线
['blockquote', 'code-block'], //引用,代码块
[{ 'header': 1 }, { 'header': 2 }], // 几级标题
[{ 'list': 'ordered' }, { 'list': 'bullet' }], // 有序列表,无序列表
[{ 'script': 'sub' }, { 'script': 'super' }], // 下角标,上角标
[{ 'indent': '-1' }, { 'indent': '+1' }], // 缩进
[{ 'direction': 'rtl' }], // 文字输入方向
[{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],// 标题
[{ 'color': [] }, { 'background': [] }], // 颜色选择
[{ 'font': ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial'] }],// 字体
[{ 'align': [] }], // 居中
['clean'], // 清除样式,
['link', 'image'], // 上传图片、上传视频
]
export default {
components: {
quillEditor
},
data () {
return {
name: 'register-modules-example',
content: '',
editorOption: {
placeholder: '请在这里输入',
theme: 'snow', //主题 snow/bubble
modules: {
history: {
delay: 1000,
maxStack: 50,
userOnly: false
},
toolbar: {
container: toolbarOptions,
handlers: {
image: function (value) {
if (value) {
// 调用element的图片上传组件
document.querySelector('.avatar-uploader input').click()
} else {
this.quill.format('image', false)
}
}
}
}
}
},
uploadUrl: `XXXXXXXX` // 服务器上传地址
}
},
methods: {
// 失去焦点
onEditorBlur (editor) { },
// 获得焦点
onEditorFocus (editor) { },
// 开始
onEditorReady (editor) { },
// 值发生变化
onEditorChange (editor) {
this.content = editor.html;
console.log(editor);
},
beforeUpload (file) { },
uploadSuccess (res) {
// 获取富文本组件实例
let quill = this.$refs.QuillEditor.quill
// 如果上传成功
if (res) {
// 获取光标所在位置
let length = quill.getSelection().index;
// 插入图片,res为服务器返回的图片链接地址
quill.insertEmbed(length, 'image', res.result.url)
// 调整光标到最后
quill.setSelection(length + 1)
} else {
// 提示信息,需引入Message
this.$message.error('图片插入失败!')
}
}
}
}
</script>
更多推荐
已为社区贡献24条内容
所有评论(0)