vue、vue-quill-editor、七牛上傳圖片

原理：
1、監聽quill富文本編輯器圖片點擊事件
2、新建一個輔助上傳輸入框並隱藏 <input type = "file" id="myupload" @change="uploadImg" v-show="false" />
3、當單機quill添加圖片的時候觸發輔助文件輸入框打開文件上傳窗口，這樣就可以獲取到File對象，在上傳的時候使用
4、七牛上傳需要 file, key, token（從後臺獲取)。上傳成功以後，會返回一個對象，{hash: '', key: ''}我們需要拼接圖片地址然後顯示到quill中。圖片地址 七牛上傳地址+key
**
下面代碼就可以修改quill中的圖片地址

let quill = this.$refs.myQuillEditor.quill
          let length = quill.getSelection().index
          // 插入圖片  res.info爲服務器返回的圖片地址
          quill.insertEmbed(length, 'image', 'https://qiniutest.tech/' + complete.key)
          // 調整光標到最後
          quill.setSelection(length + 1)

**

<template>
  <div id='quillEditorQiniu'>
    <quill-editor
      v-model="content"
      ref="myQuillEditor"
      :options="editorOption"
      @change="onEditorChange($event)"
    >
    </quill-editor>
    <!--輔助-->
    <!-- <input type="file" id="myUpload" @change="uploadImg" v-show="false"> -->
    <!--這裏用的是elementui的上傳輔助，其實和input type="file"是一樣的都是爲了獲取File對象-->
    <el-upload
      class="avatar-uploader"
      :action="'https://qiniutest.tech/'"
      name="img"
      :show-file-list="false"
      :on-success="uploadSuccess"
      :on-error="uploadError"
      :before-upload="beforeUpload"
    >
    </el-upload>
  </div>
</template>
<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import * as qiniu from 'qiniu-js'
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],
  [{'color': []}],
  ['link', 'image']
]
// 自定義編輯器的工作條
export default {
  components: {
    quillEditor
  },
  mounted () {
    // 這裏是從後臺接口獲取的七牛上傳所需要的token
    this.$store.dispatch('uploadToken')
    // 工具欄中的圖片圖標被單擊的時候調用這個方法打開上傳窗口
    let imgHandler = function (state) {
      if (state) {
        document.querySelector('.avatar-uploader input').click()
      }
    }
    // 當工具欄中的圖片圖標被單擊的時候
    this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('image', imgHandler)
  },

下面是封裝組件的代碼 QuillEditorQiniu.vue

<template>
  <div id='quillEditorQiniu'>
    <quill-editor
      v-model="content"
      ref="myQuillEditor"
      :options="editorOption"
      @change="onEditorChange($event)"
    >
    </quill-editor>
    <!--輔助-->
    <!-- <input type="file" id="myUpload" @change="uploadImg" v-show="false"> -->
    <el-upload
      class="avatar-uploader"
      :action="'https://qiniutest.tech/'"
      name="img"
      :show-file-list="false"
      :on-success="uploadSuccess"
      :on-error="uploadError"
      :before-upload="beforeUpload"
    >
    </el-upload>
  </div>
</template>
<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import * as qiniu from 'qiniu-js'
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],
  [{'color': []}],
  ['link', 'image']
]
// 自定義編輯器的工作條
export default {
  components: {
    quillEditor
  },
  mounted () {
    this.$store.dispatch('uploadToken')
    // 工具欄中的圖片圖標被單擊的時候調用這個方法
    let imgHandler = function (state) {
      if (state) {
        document.querySelector('.avatar-uploader input').click()
      }
    }
    // 當工具欄中的圖片圖標被單擊的時候
    this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('image', imgHandler)
  },
  data () {
    return {
      content: '',
      editorOption: {
        placeholder: '請輸入',
        theme: 'snow',
        modules: {
          toolbar: {
            container: toolbarOptions
          }
        }
      }
    }
  },
  methods: {
    onEditorChange (event) {
      console.log(event, 'change')
      this.$emit('getEditorInfo', event)
    },
    beforeUpload (request, file) {
      var observable = qiniu.upload(request, request.name, this.$store.state.upload_token)
      observable.subscribe({
        next (res) {
          console.log(res, 'r')
        },
        error (error) {
          console.log(error)
        },
        complete: (complete) => {
          console.log(complete, 'c')
          let quill = this.$refs.myQuillEditor.quill
          let length = quill.getSelection().index
          // 插入圖片  res.info爲服務器返回的圖片地址
          quill.insertEmbed(length, 'image', 'https://qiniutest.tech/' + complete.key)
          // 調整光標到最後
          quill.setSelection(length + 1)
        }
      })
    },
    // 上傳圖片成功
    uploadSuccess (res, file) {
      // file 返回的文件信息，也可以在這裏調用七牛上傳。
      console.log(file, 'success')
    },
    // 上傳圖片失敗
    uploadError (res, file) {
      console.log(res, file, 'error')
    }
  }
}
</script>

<style scoped>
</style>