vue-quill-editor上传图片base64转化为img标签

vue-quill-editor传图片的话默认把图片转成了base64，会导致我们的参数特别大，不好渲染

基于vue-quill-editor重写一个quill-editor组件

<template>
  <div>
    <quilleditor
      v-model="content"
      ref="myTextEditor"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @change="onEditorChange($event)"
    >
      <div id="toolbar" slot="toolbar">
        <select class="ql-size">
          <option value="small"></option>
          <!-- Note a missing, thus falsy value, is used to reset to default -->
          <option selected></option>
          <option value="large"></option>
          <option value="huge"></option>
        </select>
        <!-- Add subscript and superscript buttons -->
        <span class="ql-formats"
          ><button class="ql-script" value="sub"></button
        ></span>
        <span class="ql-formats"
          ><button class="ql-script" value="super"></button
        ></span>
        <span class="ql-formats">
          <select class="ql-color">
            <option selected="selected"></option>
            <option value="#e60000"></option>
            <option value="#ff9900"></option>
            <option value="#ffff00"></option>
            <option value="#008a00"></option>
            <option value="#0066cc"></option>
            <option value="#9933ff"></option>
            <option value="#ffffff"></option>
            <option value="#facccc"></option>
            <option value="#ffebcc"></option>
            <option value="#ffffcc"></option>
            <option value="#cce8cc"></option>
            <option value="#cce0f5"></option>
            <option value="#ebd6ff"></option>
            <option value="#bbbbbb"></option>
            <option value="#f06666"></option>
            <option value="#ffc266"></option>
            <option value="#ffff66"></option>
            <option value="#66b966"></option>
            <option value="#66a3e0"></option>
            <option value="#c285ff"></option>
            <option value="#888888"></option>
            <option value="#a10000"></option>
            <option value="#b26b00"></option>
            <option value="#b2b200"></option>
            <option value="#006100"></option>
            <option value="#0047b2"></option>
            <option value="#6b24b2"></option>
            <option value="#444444"></option>
            <option value="#5c0000"></option>
            <option value="#663d00"></option>
            <option value="#666600"></option>
            <option value="#003700"></option>
            <option value="#002966"></option>
            <option value="#3d1466"></option>
          </select>
        </span>
        <span class="ql-formats">
          <select class="ql-background">
            <option value="#000000"></option>
            <option value="#e60000"></option>
            <option value="#ff9900"></option>
            <option value="#ffff00"></option>
            <option value="#008a00"></option>
            <option value="#0066cc"></option>
            <option value="#9933ff"></option>
            <option selected="selected"></option>
            <option value="#facccc"></option>
            <option value="#ffebcc"></option>
            <option value="#ffffcc"></option>
            <option value="#cce8cc"></option>
            <option value="#cce0f5"></option>
            <option value="#ebd6ff"></option>
            <option value="#bbbbbb"></option>
            <option value="#f06666"></option>
            <option value="#ffc266"></option>
            <option value="#ffff66"></option>
            <option value="#66b966"></option>
            <option value="#66a3e0"></option>
            <option value="#c285ff"></option>
            <option value="#888888"></option>
            <option value="#a10000"></option>
            <option value="#b26b00"></option>
            <option value="#b2b200"></option>
            <option value="#006100"></option>
            <option value="#0047b2"></option>
            <option value="#6b24b2"></option>
            <option value="#444444"></option>
            <option value="#5c0000"></option>
            <option value="#663d00"></option>
            <option value="#666600"></option>
            <option value="#003700"></option>
            <option value="#002966"></option>
            <option value="#3d1466"></option>
          </select>
        </span>
        <span class="ql-formats"
          ><button type="button" class="ql-bold"></button
        ></span>
        <span class="ql-formats"
          ><button type="button" class="ql-italic"></button
        ></span>
        <span class="ql-formats"
          ><button type="button" class="ql-underline"></button
        ></span>
        <span class="ql-formats"
          ><button type="button" class="ql-blockquote"></button
        ></span>
        <span class="ql-formats"
          ><button type="button" class="ql-list" value="ordered"></button
        ></span>
        <span class="ql-formats"
          ><button type="button" class="ql-list" value="bullet"></button
        ></span>
        <span class="ql-formats"
          ><button type="button" class="ql-link"></button
        ></span>
        <span class="ql-formats">
          <button type="button" @click="imgClick" style="outline: none">
            <svg viewBox="0 0 18 18">
              <rect class="ql-stroke" height="10" width="12" x="3" y="4"></rect>
              <circle class="ql-fill" cx="6" cy="7" r="1"></circle>
              <polyline
                class="ql-even ql-fill"
                points="5 12 5 11 7 9 8 10 11 7 13 9 13 12 5 12"
              ></polyline>
            </svg>
          </button>
        </span>
        <span class="ql-formats"
          ><button type="button" class="ql-video"></button
        ></span>
      </div>
    </quilleditor>
  </div>
</template>
<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import oss from "@/utils/oss";
import { quillEditor } from "vue-quill-editor";

export default {
  name: "v-editor",
  props: {
    value: {
      type: String,
    },
    /*上传图片的地址*/
    uploadUrl: {
      type: String,
      default: "/",
    },
    /*上传图片的file控件name*/
    fileName: {
      type: String,
      default: "file",
    },
    maxUploadSize: {
      type: Number,
      default: 1024 * 1024 * 500,
    },
  },
  data() {
    return {
      content: "",
      editorOption: {
        modules: {
          toolbar: "#toolbar",
        },
      },
    };
  },
  computed: {
    editor() {
      return this.$refs.myTextEditor.quill;
    },
  },
  components: {
    quilleditor: quillEditor,
  },
  mounted() {
    this.content = this.value;
  },
  watch: {
    value(newVal, oldVal) {
      if (this.editor) {
        if (newVal !== this.content) {
          this.content = newVal;
        }
      }
    },
  },
  methods: {
    onEditorBlur() {
      //失去焦点事件
      //console.log('失去焦点');
    },
    onEditorFocus() {
      //获得焦点事件
      //console.log('获得焦点事件');
    },
    onEditorChange() {
      //内容改变事件
      //console.log('内容改变事件');
      this.$emit("getcode", this.content);
    },
    /*点击上传图片按钮*/
    imgClick() {
      /*内存创建input file*/
      var input = document.createElement("input");
      input.type = "file";
      input.name = this.fileName;
      input.accept = "image/jpeg,image/png,image/jpg,image/gif";
      input.onchange = this.onFileChange;
      input.click();
    },
    /*选择上传图片切换*/
    onFileChange(e) {
      var fileInput = e.target;
      if (fileInput.files.length === 0) {
        return;
      }
      this.editor.focus();
      if (fileInput.files[0].size > 1024 * 1024 * 2) {
        this.$message.error("图片不能大于2M", "图片尺寸过大");
      }
      this.uploadFilePic(fileInput.files[0]);
    },
    //上传图片到服务器
    async uploadFilePic(imgSource) {
      const res = await oss.ossUploadFile(imgSource, "");
      setTimeout(() => {
        // //获取光标所在位置
        let length = this.editor.getSelection().index;
        this.editor.insertEmbed(length, "image", res.ossUrl);
        // //调整光标到最后
        this.editor.setSelection(length + 1);
      }, 1000);
    },
  },
};
</script>

使用

<quill-editor v-model="form.content" upload-url="/upload/image" file-name="file" class="myQuillEditor " @getcode="getcode" />

	getcode(e) {
	   this.form.content = e
	},

form.content里面就是我们富文本框的内容