富文本上传图片

src/components/quill/index.vue

@@ -1,6 +1,16 @@
 <template>
     <div class="quill" ref="quill" :class="classes">
         <div ref="editor" :style="styles" v-loading="loading"></div>
+
+        <el-upload
+            :headers="headers"
+            :action="joggle"
+            :before-upload="beforeUpload"
+            :on-success="editorUploadSuccess"
+            style="display: none"
+        >
+            <el-button class="editorUpload" type="primary">点击上传</el-button>
+        </el-upload>
     </div>
 </template>
 
@@ -10,6 +20,7 @@ import "quill/dist/quill.core.css";
 import "quill/dist/quill.snow.css";
 import "quill/dist/quill.bubble.css";
 import toolbarOptions from "./options";
+import { joggle } from "@/apis/request.js";
 import { joggleFn } from "@/apis/request.js";
 export default {
     name: "quill",
@@ -46,6 +57,7 @@ export default {
     },
     data() {
         return {
+            joggle,
             headers: {
                 token: sessionStorage.getItem('token')
             },
@@ -62,9 +74,9 @@ export default {
                             "image": function(value) {
                                 if (value) {
                                     // 调用iview图片上传
-                                    document.querySelector(".editorUpload").click();
+                                    document.querySelector(".editorUpload").click()
                                 } else {
-                                    this.Quill.format("image", false);
+                                    this.Quill.format("image", false)
                                 }
                             }
                         }
@@ -197,11 +209,12 @@ export default {
             // 获取富文本组件实例
             let quill = this.Quill;
             // 如果上传成功
-            if (res.data.filesResult.fileUrl) {
+            const url = res.data.fileUrl
+            if (url) {
                 // 获取光标所在位置
                 let length = quill.getSelection().index;
                 // 插入图片，res为服务器返回的图片链接地址
-                quill.insertEmbed(length, "image", res.data.filesResult.fileUrl);
+                quill.insertEmbed(length, "image", url);
                 // 调整光标到最后
                 quill.setSelection(length + 1);
             } else {

src/views/title/Addtitle.vue

@@ -291,31 +291,6 @@ export default {
         linkArticleId: "",
       },
       formLabelWidth: "90px",
-      editorOption: {
-        scrollingContainer: '#editorcontainer',
-        placeholder: '',
-        // or 'bubble'
-        theme: 'snow',
-        modules: {
-          imageResize: {
-            displayStyles: {
-              backgroundColor: 'black', border: 'none', color: 'white'
-            },
-            modules: ['Resize', 'DisplaySize', 'Toolbar']
-          },toolbar: {
-            // 工具栏
-            container: 'toolbarOptions.toolbarOptions',
-            handlers: { 'image': function (value) { if (value) {
-              // upload点击上传事件
-                document.querySelector('.avatar-uploader input').click()
-            } else {
-              this.quill.format('image', false)
-            }
-            }
-            }
-          }
-        }
-      },
       isClear: false,
       headerObj:{}
     };