nuxt.js quill 富文本上传组件

QuillEditor.vue

<template>
  <section class="container">
    <input
      id="file"
      ref="input"
      class="file"
      type="file"
      style="display:none"
      @change="picUpload"
    >
    <div
      ref="myQuillEditor"
      v-quill:myQuillEditor="editorOption"
      class="quill-editor"
      :content="content"
      @change="onEditorChange($event)"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @ready="onEditorReady($event)"
    />
  </section>
</template>

<script>
  import {uploadPic} from '@/api/cms/post'
  const Cookie = require('js-cookie');
  export default {
    name: "QuillEditor",
    data() {
      const self = this;
      return {
        content: "",
        editorOption: {
          // some quill options
          modules: {
            toolbar: {
              container:[
                ["bold", "italic", "underline", "strike"], // 切换按钮
                ["blockquote", "code-block"],
                // [{ header: 1 }, { header: 2 }], // 用户自定义按钮值
                [{ list: "ordered" }, { list: "bullet" }],
                [{ script: "sub" }, { script: "super" }], // 上标/下标
                [{ indent: "-1" }, { indent: "+1" }], // 减少缩进/缩进
                [{ direction: "rtl" }], // 文本下划线

                [{ size: ["small", false, "large", "huge"] }], // 用户自定义下拉
                [{ header: [1, 2, 3, 4, 5, 6, false] }],

                [{ color: [] }, { background: [] }], // 主题默认下拉，使用主题提供的值
                [{ align: [] }],
                ['image'],//上传图片
                ["clean"] // 清除格式
              ],
              handlers:{
                'image':function(){
                  this.quill.format('image', false);//禁用quill内部上传图片方法
                  self.imgHandler(this)
                }
              }
            },
          },
          placeholder: '请输入信息',
          theme: "snow",
          quill:''
        }
      };
    },
    mounted() {
      // console.log("app init");
    },
    methods: {
      onEditorBlur(editor) {
        // console.log("editor blur!", editor);
      },
      onEditorFocus(editor) {
        // console.log("editor focus!", editor);
      },
      onEditorReady(editor) {
        // console.log("editor ready!", editor);
      },
      onEditorChange({ editor, html, text }) {
        // console.log("editor change!", editor, html, text);
        this.content = html;
        this.$emit('editorContent',html)
        // console.log(this.content);
      },
      imgHandler(handle){
        this.quill = handle.quill;
        var inputfile = document.getElementById('file');
        inputfile.click();
      },
      picUpload(){
        let files = document.getElementById('file');
        let file = files.files[0]
        let param = new FormData();
        param.append('pic',file,file.name);

        uploadPic(param,{
          token: Cookie.get('auth')
        }).then(res => {
          let length = this.quill.getSelection().index;
          this.quill.insertEmbed(length, 'image', res.data.url);
        })
      }
    }
  };
</script>

<style  scoped>
  .container {
    width: 100%;
    margin: 0 auto;
    /* padding: 10px 0; */
  }
  .quill-editor {
    min-height: 200px;
    max-height: 400px;
    overflow-y: auto;
  }
</style>