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

2021-08-03   阅读:1772   分类:前端    标签: Vue

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、效果展示:

【腾讯云】 爆款2核2G3M云服务器首年 61元,2核2G4M云服务器新老同享 99元/年,续费同价

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/fdetail/756.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
简忆博客壁纸一
简忆博客壁纸二
简忆博客壁纸三
简忆博客壁纸四
简忆博客壁纸五
简忆博客壁纸六
简忆博客壁纸七
简忆博客壁纸八
头像

简忆博客
勤于学习,乐于分享

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×