vue 富文本编辑器vue-quill-editor自定义图片上传（非base64图片）

vue-quill-editor有图片上传功能，因为vue-quill-editor是将图片转为base64编码，所以当图片比较大时，提交后台时参数过长，导致提交失败。所以我们需要自定义图片上传，把图片上传到服务器的形式。

1、 安装富文本编辑器

npm install vue-quill-editor –save

2、 main.js引入编辑器

import VueQuillEditor from 'vue-quill-editor'

Vue.use(VueQuillEditor);

import 'quill/dist/quill.core.css'

import 'quill/dist/quill.snow.css'

3、 html代码模块

<template>

   <div>

             <el-upload

              class="avatar-uploader"

              :action="uploadURL"

              :headers="headerObj"

              :data="otherData"

              :show-file-list="false"

              :on-success="QuillEditoruploadSuccess">

              </el-upload>

             <el-form-item label="描述" prop="content">

                     <quill-editor v-model="addForm.content" :options="editorOption" ref="QuillEditor"></quill-editor>

             </el-form-item>

      </div>

</template>

4、 Js代码模块

<script>

 // 工具栏配置

   const toolbarOptions = [

     ['bold', 'italic', 'underline', 'strike'],       // toggled buttons

     ['blockquote', 'code-block'],

   

     [{'header': 1}, {'header': 2}],              // custom button values

     [{'list': 'ordered'}, {'list': 'bullet'}],

     [{'script': 'sub'}, {'script': 'super'}],     // superscript/subscript

     [{'indent': '-1'}, {'indent': '+1'}],         // outdent/indent

     [{'direction': 'rtl'}],                        // text direction

   

     [{'size': ['small', false, 'large', 'huge']}], // custom dropdown

     [{'header': [1, 2, 3, 4, 5, 6, false]}],

   

     [{'color': []}, {'background': []}],         // dropdown with defaults from theme

     [{'font': []}],

     [{'align': []}],

     ['link', 'image', 'video'],

     ['clean']                                        // remove formatting button

   ]

export default {

 data () {

   return {

      // 上传图片地址

     uploadURL: domain +'upload',

     // 图片上传请求头

     headerObj:{token: window.localStorage.getItem('token')},

     //上传附带额外参数

     otherData:{

         path:'editor'

     },

     editorOption: {               

         modules: {

             toolbar: {

                 container: toolbarOptions, // 工具栏

                 handlers: {

                     'image': function (value) {

                         if (value) {

                             // alert('自定义图片')

                             document.querySelector('.avatar-uploader input').click()

                         } else {

                             this.quill.format('image', false);

                         }

                     }

                 }

             }

         }

     }

 

   }

 },

 methods: {

   // 上传成功

    QuillEditoruploadSuccess (res) {

     // console.log(res.data.path)

       // 获取富文本组件实例

       let quill = this.$refs.QuillEditor.quill

       // 如果上传成功

       if (res) {

           // 获取光标所在位置

           let length = quill.getSelection().index;

           // 插入图片，res为服务器返回的图片链接地址

           quill.insertEmbed(length, 'image', res.data.path)

           // 调整光标到最后

           quill.setSelection(length + 1)

       } else {

           // 提示信息，需引入Message

           Message.error('图片插入失败')

       }

   },

 }

}

</script>

5、 样式代码模块，隐藏图片上传按钮

<style lang="css">

 .ivu-upload { display: none;}

</style>

6、效果展示：