專案需要，看了很多部落格，都不太合適，於是東拼西湊的做了這個功能

使用外掛： vue-quill-editor quill-image-extend-module BootstrapVue axios 請自行 install 和 import 先看看效果吧 下面就是程式碼:

<template>
  <!-- bidirectional data binding（雙向資料繫結） -->
  <div class="testFweb_box">
    <div class="testFweb">
      <quill-editor v-model="content"
        value="editorVal"
        ref="myQuillEditor"
        :options="editorOption">
      </quill-editor>
    </div>
    <!-- 視訊上傳 -->
    <div class="floatBox" v-show='upvideoShow'>
      <div class="floatsmBox">
        <b-form-file accept="video/*" v-model="videofile" ref="videofilereset" placeholder="選擇視訊檔案"></b-form-file>
        <span style="margin-top: 10px;" class="btn btn-outline-success" @click='upVideo'>確認</span>
        <span style="margin-top: 10px;" class="btn btn-outline-success" @click='cancelupVideo'>取消</span>
      </div>
    </div>
    <!-- 圖片上傳 -->
    <div class="floatBox" v-show='upimgShow'>
      <div class="floatsmBox">
        <b-form-file accept="image/*" v-model="imgfile" ref="imgfilereset" placeholder="選擇圖片檔案"></b-form-file>
        <span style="margin-top: 10px;" class="btn btn-outline-success" @click='upImg'>確認</span>
        <span style="margin-top: 10px;" class="btn btn-outline-success" @click='cancelupImg'>取消</span>
      </div>
    </div>
    <div style="display: none;" id="upvideoshow" @click='upvideoShow=true'></div>
    <div style="display: none;" id="upimgshow" @click='upimgShow=true'></div>
    <div v-if='showFloat' class='floatBox ub ub_ac ub_pc'>
      <b-progress class='ub_f1 proessBox' :value="jindu" :max="100" show-progress animated></b-progress>
    </div>
  </div>
</template>
<style>
  .proessBox{
    max-width: 400px;
  }
  .testFweb{
    width: 800px;
    margin: 50px auto;
  }
  .testFweb_box .custom-file-label::after{
    content: "選擇視訊檔案";
    display: none;
  }
  .floatsmBox{
    padding: 20px;
    background-color: #fff;
    margin-top: 5%;
  }
  .floatBox{
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.2);
    width: 100%;
    height: 100%;
    padding: 0 10%;
    z-index: 10;
  }
</style>
<script>
  import {quillEditor, Quill} from 'vue-quill-editor'
  import {container} from 'quill-image-extend-module'  
  export default {
    components: {quillEditor,},
    data () {
      return {
        showFloat:false,//控制上傳進度展示浮層
        jindu:0,//上傳進度
        upvideoShow:false,//控制上傳視訊展示
        upimgShow:false,//控制上傳圖片展示
        videofile:'',
        imgfile:'',
        content: '',//編輯器內容
        editorVal:'',
        editorOption: {
          modules: {
            toolbar: {  // 如果不上傳圖片到伺服器，此處不必配置
              container: [
                  [{'size': ['small', false, 'large', 'huge']}],
                  [{'align': []}],
                  ['link', 'image', 'video']
              ],  // container為工具欄，可自行配置
              handlers: {
                'image': function () {  // 劫持原來的圖片點選按鈕事件
                  document.querySelector('#upimgshow').click()
                },
                'video':function(val){
                  document.querySelector('#upvideoshow').click()
                }
              }
            }
          },
          theme: 'snow',
          placeholder: '填寫內容',
        }  // 必須初始化為物件 init  to Object
      }
    },
    methods:{
      cancelupImg(){//取消上傳圖片 關閉浮層並清除檔案
        this.$refs.imgfilereset.reset();
        this.upimgShow = false 
      },
      cancelupVideo(){//取消上傳視訊 關閉浮層並清除檔案
        this.$refs.videofilereset.reset();
        this.upvideoShow = false
      },
      upImg(){//上傳圖片
        var that = this
        if(!that.$isDefine(that.imgfile)){
          that.$alert('請選擇圖片')
        }
        that.jindu = 0
        that.showFloat = true
        //隨機9位數名稱(由於此專案檔案是上傳到阿里雲的oss上面的，所以同一天的同名檔案會覆蓋，按需新增)
        var a = that.imgfile.name
        var eame = a.split('.')
        var rnd="";
        for(var i=0;i<9;i++){rnd+=Math.floor(Math.random()*10);}
        let param = new FormData(); //建立form物件
        param.append('img',that.imgfile,rnd+'.'+eame[eame.length-1]);//視訊
        let config = {
          onUploadProgress: progressEvent => {
            var complete = (progressEvent.loaded / progressEvent.total * 100 | 0)
            // console.log('進度值',complete)
            that.jindu = complete
          },
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }
        that.axios.post('url',param,config)//url為上傳地址
        .then(response=>{
          that.$refs.imgfilereset.reset();//清除檔案
          if (response.data.error == '0') {
            // 獲取游標所在位置
            let quill = that.$refs.myQuillEditor.quill
            let length = quill.getSelection().index;
            // 插入圖片  response.data.url為伺服器返回的圖片地址
            quill.insertEmbed(length, 'image', response.data.url)
            // 調整游標到最後
            quill.setSelection(length + 1)
            that.showFloat = false
            that.upimgShow = false
          } else {
            that.showFloat = false
            that.upimgShow = false
            this.$alert('插入失敗,請重試')
          }
        }).
        catch(function(error){
          that.$alert('插入失敗,請重試')
          that.showFloat = false
          that.upimgShow = false
        })  
      },
      upVideo(){//上傳視訊
        var that = this
        if(!that.$isDefine(that.videofile)){
          that.$alert('請選擇視訊')
        }
        that.jindu = 0
        that.showFloat = true
        //隨機9位數名稱(由於此專案的視訊是上傳到阿里雲的oss上面的，所以同一天的同名檔案會覆蓋)
        var a = that.videofile.name
        var eame = a.split('.')
        var rnd="";
        for(var i=0;i<9;i++){rnd+=Math.floor(Math.random()*10);}
        let param = new FormData(); //建立form物件
        param.append('video',that.videofile,rnd+'.'+eame[eame.length-1]);//視訊
        let config = {
          onUploadProgress: progressEvent => {
            var complete = (progressEvent.loaded / progressEvent.total * 100 | 0)
            // console.log('進度值',complete)
            that.jindu = complete
          },
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }
        that.axios.post('url',param,config)//url為上傳地址
        .then(response=>{
          that.$refs.videofilereset.reset();//清除檔案
          if (response.data.error == '0') {
            // 獲取游標所在位置
            let quill = that.$refs.myQuillEditor.quill
            let length = quill.getSelection().index;
            // 插入視訊  response.data.url為伺服器返回的圖片地址
            quill.insertEmbed(length, 'video', response.data.url)
            // 調整游標到最後
            quill.setSelection(length + 1)
            that.showFloat = false
            that.upvideoShow = false
          } else {
            that.showFloat = false
            that.upvideoShow = false
            this.$alert('插入失敗,請重試')
          }
        }).
        catch(function(error){
          that.$alert('插入失敗,請重試')
          that.showFloat = false
          that.upvideoShow = false
        })  
      }
    },
  }
</script>
 

解釋

$alert();$isDefine()是我自己封裝的方法，前者為彈出框，後者為判斷欄位是否為空、null、undefined等，自行封裝

後臺返回

成功返回 錯誤返回 error不為0即可