vue-quill-editor 上传图片 先传到服务器 在显示出来

html

script

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor, Quill } from 'vue-quill-editor'
export default {
  name: 'QuillEditor',
  components: {
    quillEditor
  },
  props: {
    prefixCls: {
      type: String,
      default: 'ant-editor-quill'
    },
    // 表单校验用字段
    // eslint-disable-next-line
    value: {
      type: String
    }
  },
  data () {
    return {
      // 标题是否禁用
      Title: false,
      // 编号是否禁用
      umber: false,
      submitd: true,
      resetd: true,
      visible: false,
      content: null,
      editorOption: {
        placeholder: '编辑文章内容',
        theme: 'snow',
        modules: {
          ImageExtend: {
            loading: true,
            name: 'pictureFile',
            size: 6,
            start: () => {},
            end: () => {},
            error: () => {},
            change: (xhr, formData) => {}
          },
          toolbar: {
            container: container,
            // 拦截
            handlers: {
              image: function (value) {
                if (value) {
                  document.querySelector('#upload').click()// 劫持原来的图片点击按钮事件
                }
              }
            }
          }
        }
      }
    }
  },
  computed: {
    ...mapGetters(['department'])
  },
  methods: {
    login () {
      this.visible = true
      this.submitd = true
      this.resetd = true
    },
    // 获取焦点事件
    focus (event) {
      // 设置富文本编辑器不可编辑
      if (this.umber === true) {
        event.enable(false)
      }
    },
    show (e) {
      this.visible = true
      this.queryParam.title = e.title
      this.queryParam.number = e.number
      this.queryParam.content = e.content
      this.submitd = false
      this.resetd = false
      this.umber = true
      this.Title = true
    },
    onEditorChange ({ quill, html, text }) {
      this.queryParam.content = html
    },
    submit () {
      addMessageList({
        title: this.queryParam.title,
        content: this.queryParam.content,
        number: this.queryParam.number,
        department: this.department
      }).then(res => {
        this.$message.success('上传成功')
        this.visible = false
        this.queryParam.content = ''
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    // 拦截
    change (e) {
      const file = e.target.files[0]
      const formData = new FormData()
      // console.log(formData)
      formData.append('userfile', file)
      messageLoad(formData)
        .then((res) => {
          const quill = this.$refs.myQuillEditor.quill
          if (res === '上传成功') {
            const length = quill.getSelection().index // 光标位置
            // 插入图片  图片地址
            const imgurl = `http://网址:端口号/messagefiles/` + e.target.files[0].name
            quill.insertEmbed(length, 'image', imgurl)
            // 调整光标到最后
            quill.setSelection(length + 1) // 光标后移一位
          }
        })
        .catch((err) => {
          console.error(err)
        })
    },
    handleCancel () {
      this.visible = false
      this.queryParam.title = ''
      this.queryParam.number = ''
      this.queryParam.content = ''
      this.umber = false
      this.Title = false
    },
    // 重置
    reset () {
      this.queryParam.title = ''
      this.queryParam.number = ''
      this.queryParam.content = ''
      this.umber = false
      this.Title = false
    }
  }
}

最最主要的代码是拦截

   // 拦截
    change (e) {
      const file = e.target.files[0]
      const formData = new FormData()
      formData.append('userfile', file)
      messageLoad(formData)
        .then((res) => {
          const quill = this.$refs.myQuillEditor.quill
          if (res === '上传成功') {
            const length = quill.getSelection().index // 光标位置
            // 插入图片  图片地址
            const imgurl = `http://网址:端口号/messagefiles/` + e.target.files[0].name
// const imgurl = window.location.protocol + '//' + window.location.host + '/messagefiles/' + e.target.files[0].name
            quill.insertEmbed(length, 'image', imgurl)
            // 调整光标到最后
            quill.setSelection(length + 1) // 光标后移一位
          }
        })
        .catch((err) => {
          console.error(err)
        })
    },