vue-quill-editor上传图片

本文主要是介绍vue-quill-editor上传图片，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

问题：
vue-quill-editor富文本编辑器上传图片默认为base64，存入数据库过于过于庞大，使用quill-image-extend-module+vue-quill-editor实现图片地址上传。

解决完之后效果图：
在这里插入图片描述

解决思路：
哈哈，第一步当然去看vue-quill-editor官网了，官网提供了quill-image-extend-module模块专门处理图片上传问题。
官网有个QuillWatch模块，这里没有采用，我用的方法思路很简单就是：劫持原来的图片上传事件，然后上传到服务器，服务器返回一个图片链接，我再给插进去。

代码：
在下载quill-image-extend-module之前你肯定得下载好了vue-quill-editor，不知道怎么配置点击这里。

 npm install quill-image-extend-module --save-dev

html:<quill-editorv-loading="videoLoading"element-loading-text="视频正在上传"ref="myQuillEditor"v-model="articleInfo.content":options="editorOption"@change="onEditorChange($event)"></quill-editor><inputtype="file"accept=".png,.jpg,.jpeg"@change="change"id="upload"style="display: none"/>导入：
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor, Quill } from "vue-quill-editor";
import { container, ImageExtend } from "quill-image-extend-module";
Quill.register("modules/ImageExtend", ImageExtend);data：editorOption: {//富文本配置项placeholder: "编辑文章内容",theme: "snow",modules: {ImageExtend: {loading: true,name: "pictureFile",size: 6,action: "http://101.68.86.229:8559/api/resources/pictureUploal",response: (res) => {return res.data;},headers: (xhr) => {xhr.setRequestHeader("Authorization",window.sessionStorage.getItem("token"));},start: () => {},end: () => {},error: () => {},change: (xhr, formData) => {},},toolbar: {container: container,//拦截handlers: {image: function (value) {if (value) {document.querySelector("#upload").click(); // 劫持原来的图片点击按钮事件}}},},},},
重点：//makdown上传图片change(e) {let file = e.target.files[0];const formData = new FormData();formData.append("pictureFile", file);makdwnImg(formData).then((res) => {let quill = this.$refs.myQuillEditor.quill;if (res.data.code == 200) {// const formdata = _.extend({}, this.formdata)let length = quill.getSelection().index; //光标位置// 插入图片  图片地址quill.insertEmbed(length, "image", res.data.data);// 调整光标到最后quill.setSelection(length + 1); //光标后移一位}}).catch((err) => {console.error(err);});}