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

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

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

<template><div><quilleditorv-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><polylineclass="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},