项目场景：

提示：这里简述项目相关背景：

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时遇到的问题，如有不足请指出。