vue-quill-editor图片上传到服务器

<template>
  <div>
    <!-- // 文件上传组件 -->
    <el-upload
      id="upimg"
      v-show="false"
      class="upload-demo"
      :action="imgUploadUrl"
      :on-success="handleSuccess"
      multiple
    >
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>

    <!-- // 富文本编辑器组件 -->
    <quill-editor v-model="content" :options="editorOption" ref="QuillEditor">
    </quill-editor>
  </div>
</template>
<script>
// require styles 引入样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'

// 富文本编辑器工具栏配置，因为涉及到富文本编辑器以外的组件调用，所以在这里我们需要重新自定义一下富文本编辑器的工具栏
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 {
  components: {
    quillEditor
  },
  data() {
    return {
      // 上传图片接口地址
      imgUploadUrl: 'http://xxxxxxxx/fileUpload',
      // 富文本编辑器内容
      content: '',
      // 富文本编辑器工具栏
      editorOption: {
        modules: {
          toolbar: {
            container: toolbarOptions, // 工具栏
            handlers: {
              image: function (value) {
                if (value) {
                  // 调用element的图片上传组件
                  // （这里是用的原生js的选择dom方法）
                  document.querySelector('#upimg button').click()
                } else {
                  this.quill.format('image', false)
                }
              }
            }
          }
        }
      }
    }
  },
  methods: {
    // element的upload组件上传图片成功后调用的函数
    handleSuccess(res) {
      // 获取富文本组件实例
      const quill = this.$refs.QuillEditor.quill
      if (res) {
        // 如果上传成功
        // 获取光标所在位置
        const length = quill.getSelection().index
        // 插入图片，res为服务器返回的图片链接地址
        quill.insertEmbed(length, 'image', res.data)
        // 调整光标到最后
        quill.setSelection(length + 1)
      } else {
        // 提示信息
        this.$message.error('图片插入失败')
      }
    }
  }
}
</script>

<style></style>