项目场景:
提示:这里简述项目相关背景:
vue_wetland项目中使用富文本编辑器vue-quill-editor完成发表文章模块。
问题描述
提示:这里描述项目中遇到的问题:
在项目中使用富文本编辑器vue-quill-editor上传图片过大,导致服务端压力过大。
vue-quill-editor官网:
/liuwave/quill/1434140
安装vue-quill-editor:
npm install vue-quill-editor --save
原因分析:
提示:这里填写问题的分析:
vue-quill-editor
在使用上传图片功能时,用户将直接选中图片置于编辑框,vue-quill-editor
富文本编辑器上传图片默认为base64,存入数据库过于过于庞大,进而导致网页加载过慢。
解决方案:
提示:这里填写该问题的具体解决方案:
新建一个input type=file
文件选择框 ,每当vue-quill-editor
选择图片时,为新建的文件选择框添加默认点击事件让其代理选取图片文件,然后 通过lrz插件
压缩图片,再将压缩完成的图片返回vue-quill-editor
富文本编辑器。
lrz压缩插件的使用:
1.安装lrz:
npm install lrz --save-dev
2.使用:lrz()参数1:文件(files[0]),参数2:压缩文件的配置
import lrz from "lrz";lrz(fileData, {width: this.size, fieldName: "file" }).then(function(rst) {//压缩成功的回调console.log(rst); //rst为压缩过后的图片}).catch(function(err) {//压缩失败的回调}).always(function() {// 不管是成功失败,都会执行});
具体实现代码:
vue-quill-editor
具体使用可参考官网:
/liuwave/quill/1434140
HTML
中:
<input class="quill-img" type="file" @change="postFile($event)" />//代理文件框,为了不影响原来布局,可将其隐藏。
vue-quill-editor
的配置项中添加handlers
:
editorOption: {placeholder: "请在这里输入",modules: {toolbar: {container: [["bold", "italic", "underline", "strike"], //加粗,斜体,下划线,删除线["blockquote", "code-block"], //引用,代码块[{header: 1 }, {header: 2 }], // 标题,键值对的形式;1、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: [] }], //字体[{align: [] }], //对齐方式["clean"], //清除字体样式["image", "video"], //上传图片、上传视频],handlers: {image: function (value) {if (value) {// 触发input框选择图片文件,并执行默认点击事件。document.querySelector(".quill-img").click();} else {this.quill.format("image", false);}},},},},},
在methods
中写压缩图片的方法:
postFile(e) {let _this = this;let file = e.target.files[0];// this.files[0] 是用户选择的文件lrz(file, {width: 1024 }).then(function (rst) {var img = new Image();img.src = rst.base64;let quill = _this.$refs.myQuillEditor.quill; //获取富文本编辑器的编辑框quill.focus();//聚焦在上面quill.insertEmbed(quill.getSelection().index, "image", img.src);//调用富文本编辑器的image上传图片功能,将压缩后的图片传入。return rst;});},
本文章主要帮自己记录初学vue时遇到的问题,如有不足请指出。