项目场景：

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

vue_wetland项目中使用富文本编辑器vue-quill-editor完成发表文章模块。

问题描述

提示：这里描述项目中遇到的问题：

在项目中使用富文本编辑器vue-quill-editor上传图片过大，导致服务端压力过大。

vue-quill-editor官网：

https://www.kancloud.cn/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具体使用可参考官网：

https://www.kancloud.cn/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时遇到的问题，如有不足请指出。