改造vue-quill-editor(二)：10秒搞定自定義上傳圖片到服務器

原生上傳圖片到服務器

上次給你們分享過下面的文章
結合element-ui上傳圖片到服務器
基於上面的原理，我又替你們把整個配置封裝好了，你們在使用的時候直接引入配置文件便可。無需引入
element-ui，而且增長了部分功能：

• 可限制圖片上傳的格式
• 可限制圖片的大小
• 可重寫圖片上傳成功失敗觸發的事件

具體使用以下

引入自定義配置文件 vue-quill-editor-config.js

• 新建一個文件名爲 vue-quill-editor-config.js（文件名可自定義），點擊上面的連接複製代碼到本文件

綁定配置

• 引入配置參數

import {editorOptions} from '@/config/vue-quill.editor-config'
// '@/config/vue-quill.editor-config' 爲你存放自定義配置的文件路徑

• 在vue組件中綁定配置

<template>
 <div>
 <quill-editor
    ref="myQuillEditor"
    :options="editorOptions"  <!-- 這裏必須綁定-->
  @change="onEditorChange($event)"
  @ready="onEditorReady($event)"
  >
  </quill-editor>
</div>
</template>
<script>
  import {quillEditor} from 'vue-quill-editor' // 調用編輯器
  import {editorOptions} from '@/config/vue-quill.editor-config'

  export default {
    components: {quillEditor}
    data() {
      return {
        //  富文本框參數設置， 這裏也是必須綁定的，由於參數綁定是綁定組件裏面的數據，
       //  而不是直接綁定引入的editorOptionss
        editorOptions: editorOptionss
      }
    }
  }
</script>

預留的事件接口

在配置文件中你們可根據本身的需求自行定義上傳圖片的各個階段的事件

注意綁定好你的圖片參數

以下圖所示，res.info爲上傳圖片成功後返回的圖片地址，若是不確認返回的數據格式，能夠使用console.log() 進行查看

附加內容

如何在配置文件中獲取Vue實例
因爲在handler中，this是指向編輯器，所以沒法直接用this去獲取Vue實例，
若是想獲取，須要進行以下操做

• 暴露實例

• 引入實例

在vue-quill-editor-config.js配置中引入

• 在vue-quill-editor-config.js配置文件中使用

結束！

簡不簡單？

感受有用的朋友請點個贊