antd pro中vue-quilleditor富文本编辑器，重写非base64图片上传方法

最新推荐文章于 2025-12-17 10:59:42 发布

原创最新推荐文章于 2025-12-17 10:59:42 发布 · 984 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 同时被 2 个专栏收录

9 篇文章

订阅专栏

Ant-design

4 篇文章

订阅专栏

本文介绍如何优化AntD Pro框架中的QuillEditor组件上传图片过程，通过重写图片上传方法解决了默认使用Base64格式上传导致的效率低下问题。

工作需要用到富文本编辑器，antdpro自带的有两个富文本编辑器，我用的是quilleditor。在上传图片的时候，图片是默认以base64格式上传的，无论是上传还是请求都非常费时，体验极差。于是想要解决这个问题，发现很多人都选择重写上传方法。
但是antd的a-upload有一个隐藏的问题
先贴上重写的方法代码

//html就是一个朴实无华的上传组件，自定义了一下upload事件
<template>
  <div :class="prefixCls">
    <a-upload list-type="picture" v-show="false" :customRequest="uploadimg">
      <a-button> <a-icon type="upload" /> upload </a-button>
    </a-upload>

    <quill-editor
      v-model="content"
      ref="myQuillEditor"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @ready="onEditorReady($event)"
      @change="onEditorChange($event)"
    >
    </quill-editor>
  </div>
</template>

//由于需要重写tabbar 中header图片的上传事件，图片重写又在tabbar中，没办法只能重新定义工具栏
modules: {
          toolbar: {
            container: [
              // 工具栏配置
              ['bold'],
              ['italic'],
              ['underline'],
              ['strike'],
              [{ header: 1 }, { header: 2 }],
              [{ list: 'ordered' }, { list: 'bullet' }],
              [{ align: [] }],
              [{ header: [1, 2, 3, 4, 5, 6, !1] }],
              //    ['blockquote'], ['code-block'],//不需要的可以干掉
              ['image'],
              [{ list: 'ordered' }, { list: 'bullet' }],
              [{ direction: 'rtl' }]
            ],
            handlers: {
              image: function(value) {
                if (value) {
                  // 获取到antd的upload框选择图片的弹出框事件并触发一次点击
                  document.querySelector('.ant-upload .ant-btn').click()
                } else {
                //禁用quill自带的image时间
                  this.quill.format('image', false)
                }
              }
            }
          }
        }

 uploadimg(data) {
      const formData = new FormData()
      formData.append('file', data.file)
      console.log(formData)
      uploadimg(formData).then(res => {
        data.onSuccess(res, data.file)
        this.url = res.url
        //console.log(this.url)
		//以上是普通的上传方法代码，吧后台返回的url拿到就行了
		
		//这一步是获取quilleditor的实例
        let quill = this.$refs.myQuillEditor.quill
        
        // 获取光标所在位置
        let length = quill.getSelection().index
        if (res) {
          console.log(length)
          // 插入图片  res为服务器返回的图片地址
          quill.insertEmbed(length, 'image', this.url)
          // 调整光标到最后
          quill.setSelection(length + 1)
          this.$message.success('上传成功')
        } else if (res.file.status === 'error') {
          this.$message.error('图片插入失败')
        }
      })
    },

自此，重写的图片上传方法就完成了。
注意，我之前提到了一个隐藏的问题
刚开始我是把获取光标以下的代码写在了a-upload组件的change方法里，但是后来发现每次都会触发两次change，百思不得其解，仔细读了文档发现，上传和完成，失败都会触发change回调，这才反应过来我的这些代码应该写在uploadimg方法里。果断吧@change删掉，恶心了我一天，吐了在这里插入图片描述