vue中使用quill-image-extend-module實現在富文本vue-quill-editor中實現圖片先上傳到服務器，再將上傳路徑放在富文本中

在使用vue-quill-editor富文本的時候，對於圖片的處理經常是將圖片轉換成base64，再上傳數據庫，但是base64不好存儲。

原理：首先將圖片上傳服務器，再將圖片插入到富文本中，同時光標后移一位。（其實就是將富文本中的圖片上傳改成了自己寫上傳）

1，安裝插件

import { quillEditor, Quill } from 'vue-quill-editor'
import { container, ImageExtend, QuillWatch } from 'quill-image-extend-module'
Quill.register('modules/ImageExtend', ImageExtend)

2.布局：

<quill-editor
      @change="onEditorBlur($event)"
      id="desc"
      ref="quill"
      v-model="desc"
      :options="editorOption"
    ></quill-editor>
     <input type="file" @change="change" id="upload" style="display:none;" />

3:，options的值，放在vue存放數據的data中

editorOption: {
        placeholder: '此處輸入賽事規程',
        modules: {
          ImageExtend: {
            loading: true,
            name: 'img',
            action: UploadImage,//上傳的服務器地址
            response: res => {
              return res.data
            }
          },
          toolbar: {
            container: container,
            handlers: {
              image: function(value) {
                if (value) {
                  document.querySelector('#upload').click()----------------#upload即為自己寫的上傳，可以使用最簡單的input
                } else {
                  this.quill.format('image', false)
                }
              }
            }
          }
        }
      },

4,上傳（我們后端上傳使用的FormData,只有最后得到地即可）

  change(e) {
      let file = e.target.files[0]
      const formData = new FormData()
      formData.append('file', file)
------下面可以根據后端寫的上傳接口進行傳遞參數
      UploadImage(formData)
        .then(res => {
          let quill = this.$refs.quill.quill------------$ref中得到quill后再往下找quill,否則查找光標位置會報錯。
          if (res.code === 0) {
            const formdata = _.extend({}, this.formdata)
            let length = quill.getSelection().index//光標位置
            // 插入圖片  圖片地址
            quill.insertEmbed(length, 'image', res.data)
            // 調整光標到最后
            quill.setSelection(length + 1)//光標后移一位
          }
        })
        .catch(err => {
          console.error(err)
        })
    }