<!-- 
首先，必須隱藏這個元素：display:none；
v-loading.fullscreen.lock：設置上傳時顯示loading，值為true/false；
action：設置上傳的地址；
before-upload：上傳前的鉤子函數(shù)，驗證是否為音頻文件；
on-success：上傳成功的鉤子函數(shù)；
on-progress：上傳時的鉤子函數(shù)，設置顯示loading
 -->
<div style="display:none">
  <el-upload
    v-loading.fullscreen.lock="fullscreenLoading"
    :action="actionUrl"
    :before-upload="beforeUpload"
    :on-success="handleSuccess"
    :on-progress="uploadIng"
  >
  <el-button size="small" class="uploadVoiceBtn" type="primary">upload</el-button>
  </el-upload>
</div>

beforeUpload(file){
  // file.type好像只能返回圖片的格式，其他的將會是 ""， 所以需要自己獲取后綴名判斷文件格式
  let pointIndex = file.name.lastIndexOf(".");
  let fileType = file.name.substring(pointIndex+1);  //獲取到文件后綴名
  // if (fileType !== 'mp3' && fileType !== 'ogg' && fileType !== 'wav') {
  if (fileType !== 'mp3' && fileType !== 'ogg') {
    this.$message.error('你選擇的文件不是音頻哦，僅支持mp3和ogg格式')
    return false
  }
},

uploadIng(){    //上傳時顯示loading
  this.fullscreenLoading = true
}

//富文本設置
editorOption: {
  modules: {
    ...,      //其他配置，如quill-image-extend-module
    toolbar: {
      container: [
        ['bold', 'italic', 'underline', 'strike'],
        [{ 'size': ['small', false, 'large', 'huge'] }],
        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
        [{ 'color': [] }, { 'background': [] }],
        ['blockquote', 'code-block'],
        ['link', 'image'],
        ['voice']   //新添加的工具
      ],
      handlers: {
        'voice': function(value){   //添加工具方法，即點擊時模仿點擊上傳組件的按鈕
         document.querySelector('.uploadVoiceBtn').click()
        }
      }
    }
  },
  initVoiceButton:function(){   //初始化"voice"按鈕樣式
    const voiceButton = document.querySelector('.ql-voice'); //"ql-" 是插件自動加的前綴
    
    // 添加樣式，使用fontawesome初始化圖標的樣式
    voiceButton.classList.add('fa');
    voiceButton.classList.add('fa-volume-up');
    voiceButton.classList.add('fa-lg');

    // 當然，可以直接手寫樣式，如：
    // voiceButton.style.cssText = "width:80px; border:1px solid #ccc; border-radius:5px;";
    // voiceButton.innerText="上傳音頻";
  }
},

mounted(){
  this.editorOption.initVoiceButton();   //初始化音頻圖標，這樣才能顯示
},

import { quillEditor, Quill } from 'vue-quill-editor'
components: {
  quillEditor
},

<!-- change是內(nèi)容改變后的回調(diào)函數(shù)，做頁面處理，這里不說，自行根據(jù)系統(tǒng)頁面處理 -->
<quill-editor ref="myTextEditor" v-model="editorTempValue" :options="editorOption" @change="onEditorChange($event)"> </quill-editor>

handleSuccess(res, file, fileList){
  this.fullscreenLoading = false;
  // 獲取富文本組件實例
  let quill = this.$refs.myTextEditor.quill
  if (res.code === 0) {   // 如果上傳成功
    let length = quill.getSelection().index; // 獲取光標所在位置

    let BlockEmbed = Quill.import('blots/block/embed');
    class AudioBlot extends BlockEmbed {
      static create(value) {
        let node = super.create();
        node.setAttribute('src', value.url);   //設置audio的src屬性
        node.setAttribute('controls', true);   //設置audio的controls，否則他將不會顯示
        node.setAttribute('controlsList', 'nodownload');   //設置audio的下載功能為不能下載
        node.setAttribute('id', 'voice');     //設置一個id
        return node;
      }

      // static value(node) {
      //  return {
      //   url: node.getAttribute('src')
      //  };
      // }
    }
    AudioBlot.blotName = 'audio';
    AudioBlot.tagName = 'audio';   //自定義的標簽為audio
    Quill.register(AudioBlot);

    // insertEmbed(index: Number(插入的位置), type: String(標簽類型), value: any(參數(shù)，將傳入到create的方法中去), source: String = 'api')
    quill.insertEmbed(length, 'audio', {url: res.data.url}, "api");
    quill.setSelection(length + 1); //光標位置向后移動一位
  } else {    
    this.$message.error(res.msg);    // 上傳失敗，提示錯誤信息
  }
},