vue-quill-editor富文本上传图片过大，如何优雅处理？

前端富文本数不胜数，但总有一些这样那样的问题，记录一下自己遇到的问题，传入图片过大，如何解决？

图片格式是base64，巨大长度，会给服务器很大压力，这时候，我们将其格式转换，可是该怎么转换呢？？

好家伙，el-upload天然完美之组件。

如何引入编辑器，封装成组件，在组件中components/quill 文件中引入

import "quill/dist/quill.core.css";

import "quill/dist/quill.snow.css";

import "quill/dist/quill.bubble.css";

import { quillEditor} from "vue-quill-editor";

import * as Quill from "quill";

<template>
<div>
  <el-upload
     id="upimg"
     v-show="false"
      class="upload-demo"
      :http-request="
        (params) => {
          handleSuccess(params);
        }
      "
      multiple
    >
      <i class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
  
    <quill-editor
      ref="myQuillEditor"
      v-model="content"
      :options="myQuillEditor"
      style="border-bottom: 1px solid #dcdfe6;background:#fff;"
      @ready="onEditorReady($event)"
    ></quill-editor>
  </div>
</template>

将el-upload图片上传和编辑器封装好，当使用编辑器上传图片功能的时候，调用el-upload中http-request自定义上传方法，会覆盖默认上传方法，最后再把这个ele组件隐藏即可。

js代码

<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor} from "vue-quill-editor";
import * as Quill from "quill";

let fontSizeStyle = Quill.import('attributors/style/size')
  fontSizeStyle.whitelist = [false, '14px','16px', '20px', '24px', '30px', '36px']
  Quill.register(fontSizeStyle, true)


//设置字体样式
let Font = Quill.import('attributors/style/font') //引入这个后会把样式写在style上
    let fonts = [false, 'SimSun', 'SimHei','Microsoft-YaHei','KaiTi','FangSong','Arial','sans-serif']
    Font.whitelist = fonts //将字体加入到白名单
    Quill.register(Font, true);
    
//设置对齐方式样式
var Align = Quill.import('attributors/style/align');
Align.whitelist = ['right', 'center', 'justify'];
Quill.register(Align, true);

import { uploadImg } from "@/api/common";
const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // toggled buttons
  [{ header: 1 }, { header: 2 }], // custom button values
  [{ list: "ordered" }, { list: "bullet" }],
  [{ indent: "-1" }, { indent: "+1" }], // outdent/indent
  [{ direction: "rtl" }], // text direction
  // [{ size: ["13px", false, "large", "huge"] }], // custom dropdown
  [{ "size": ['14px','16px', '20px', '24px', '30px', '36px'] }],  // 字体大小
  [{ header: [1, 2, 3, 4, 5, 6, false] }],
  [{ color: ["#5F5F5F"] }, { background: [] }], // dropdown with defaults from theme
  [{ 'font': ['SimSun', 'SimHei','Microsoft-YaHei','KaiTi','FangSong','Arial','sans-serif'] }],// 字体
  [{ align: [] }],
  ["link", "image"],
  ["clean"],
];
export default {
  components: {
    quillEditor,
  },
  data () {
    return {
      main: '',
      //富文本
      myQuillEditor: {
        // 富文本框配置
        placeholder: "",
        theme: "snow", // or 'bubble'
        modules: {
          toolbar: {
            container: toolbarOptions, // 工具栏
            handlers: {
              image: function (value) {
                if (value) {
                  // 调用element的图片上传组件，使用原生js的dom方法
                  document.querySelector("#upimg i").click();
                  // document.querySelector("#iviewUp input").click();
                } else {
                  this.quill.format("image", false);
                }
              },
            },
          },
        },
      },
      content: ''
    }
  },
  methods:{
    onEditorReady(val){
      // console.log(val);
      this.content = this.contentText;
    },
    // element的upload组件上传图片成功后调用的函数
    handleSuccess(params) {
      // 获取富文本组件实例
      let quill = this.$refs.QuillEditor.quill
       //上传图片
      let fd = new FormData();
      fd.append("file", params.file);
      this.axios({
            methods:'post',
            url:'xxxxxxxx', // 上传至后台服务器的接口
            data: fd,
        }).then((res) => {
          if (res) { // 如果上传成功
            // 获取光标所在位置
            let length = quill.getSelection().index
            // 插入图片，res为服务器返回的图片链接地址
            quill.insertEmbed(length, 'image', res.data.url)
            // 调整光标到最后
            quill.setSelection(length + 1)
          } else {
            // 提示信息
           this.$message.error('图片插入失败')
          }
       }
    },
  },
// 监听编辑器内容 传入父组件，然后父组件的传来的值赋值给子组件的内容，完成'实时绑定'
  watch: {
    content: {
      handler (newValue, oldValue) {
        this.$emit('send', newValue)
      }
    },
    contentText: {
      handler (newValue, oldValue) {
        this.content = newValue
      }
    }
  },
// 从父组件接收到的内容
  props: {
    contentText: {
      type: String,
      value: ''
    }
  }
}
</script>

css样式

<style scoped>
.quill-editor >>> .ql-picker.ql-font .ql-picker-label[data-value=SimSun]::before,
.quill-editor >>> .ql-picker.ql-font .ql-picker-item[data-value=SimSun]::before {
  content: "宋体";
  font-family: "SimSun"!important;
}
.quill-editor >>> .ql-picker.ql-font .ql-picker-label[data-value=SimHei]::before,
.quill-editor >>> .ql-picker.ql-font .ql-picker-item[data-value=SimHei]::before {
  content: "黑体";
  font-family: "SimHei";
}
.quill-editor >>> .ql-picker.ql-font .ql-picker-label[data-value=Microsoft-YaHei]::before,
.quill-editor >>> .ql-picker.ql-font .ql-picker-item[data-value=Microsoft-YaHei]::before {
  content: "微软雅黑";
  font-family: "Microsoft YaHei";
}
.quill-editor >>> .ql-picker.ql-font .ql-picker-label[data-value=KaiTi]::before,
.quill-editor >>> .ql-picker.ql-font .ql-picker-item[data-value=KaiTi]::before {
  content: "楷体";
  font-family: "KaiTi"!important;
}
.quill-editor >>> .ql-picker.ql-font .ql-picker-label[data-value=FangSong]::before,
.quill-editor >>> .ql-picker.ql-font .ql-picker-item[data-value=FangSong]::before {
  content: "仿宋";
  font-family: "FangSong";
}

  .ql-snow .ql-picker.ql-size .ql-picker-label::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: '14px';
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
    content: '10px';
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
    content: '18px';
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
    content: '32px';
  }
  
</style>

父组件需要用到富文本编辑器时，调用即可

<editor :contentText="addFormField.info_content" @send="getEditor"></editor>


...
methods:{
// 获取富文本编辑器中的值
    getEditor(data){
        this.addFormField.info_content = data;
    },

}

// 上面是父组件，子组件传来的值是content，接收到之后赋值给表单对象info_content属性，而该属性也是
以contentText作为属性从父组件传入子组件的值，然后子组件中watch监听到contentText属性的变化，并将新值赋值给content属性。

// 总之，哪里需要直接调用上述代码即可~~~