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图片上传成功事件。图片上传成功后,把图片加载到富文本编辑器内。