vue-quill-editor 结合axios 实现图片后端上

1.首先配置toolbar选项

toolbar: {
                  container: [
                    [{'color': []}, {'background': []}],
                    ['bold', 'italic', 'underline', 'strike', 'image'], // toggled buttons
                    [{'align': []}],
                    // ['blockquote', 'code-block'],
                    // [{'header': 1}, {'header': 2}, {'header': 3}, {'header': 4}, {'header': 5}, {'header': 6}]
                    [{'size': ['small', false, 'large', 'huge']}]
                  ],
                  // eslint-disable-next-line
                  handlers: {
                    'image': function (value) {
                      if (value) {
                        document.querySelector('#input_hide').click()
                      } else {
                        this.quill.format('image', false)
                      }
                    }
                  }
                },

2. handlers里面就是富文本图片上传按钮回调，在点击的时候处理富文本，让他去触发1个input即可

 <input style="position: fixed;left: -2000px;top: -2000px;" @change="handleAdd_quill_editor" id="input_hide"
                   class="upload_input" type="file">

3.然后处理上传逻辑即可

handleAdd_quill_editor(ev) { // 上传富文本
        let vm = this
        let quill0 = vm.$refs['myQuillEditor0'].quill
        let files = ev.target.files[0]
        let param = new FormData() // 创建form对象
        param.append('file', files, files.name)// 通过append向form对象添加数据
        let config = {
          headers: {'Content-Type': 'multipart/form-data'}
        } // 添加请求头
        axios.post(vm.uploadFiles, param, config)
          .then(response => {
            let quillFwb = quill0
            let pathUrl = vm.defultUrl + response.data.path
            // 获取光标所在位置
            let length = quillFwb.getSelection().index
            // 插入图片，res为服务器返回的图片链接地址
            quillFwb.insertEmbed(length, 'image', pathUrl)
            // 调整光标到最后
            quillFwb.setSelection(length + 1)
          })
      }