vue使用vue-quill-editor上传图片的一些坑

最近项目中使用了vue-quill-editor，记一下遇到的一些问题：
首先使用element-ui画出来页面：

<template>
  <div class="app-container" append-to-body>
	 	<el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" :before-close="close">
      		<el-form :inline="true" :rules="rules" ref="dataforms" :model="form" label-width="100px" size="mini">
      			<div class="avatar">
		          <!-- 图片上传组件辅助-->
		          <el-upload
		            class="avatar-uploader"
		            :action="serverUrl"
		            name="img"
		            :show-file-list="false"
		            :on-success="uploadSuccess"
		            :on-error="uploadError"
		            :before-upload="beforeUpload">
		          </el-upload>
		        </div>
		        <el-row v-loading="quillUpdateImg">
		          <el-form-item label="警示信息" prop="content">
		            <div class="edit_container">
		              <div class="pre-view">
		                <el-button type="primary" @click="preView">预览</el-button>
		              </div>
		              <quill-editor
		                v-model="form.content"
		                ref="myQuillEditor"
		                :options="editorOption"
		                @blur="onEditorBlur($event)"
		                @focus="onEditorFocus($event)"
		                @change="onEditorChange($event)">
		              </quill-editor>
		              <div class="limit">
		                <div class="limit-tip">友情提示：支持第三方微信编辑器的内容复制</div>
		                <div class="limit-content">当前已输入 <span>{{contentLen}}</span> 个字符，您还可以输入 <span>{{surPlusLen}}</span> 个字符。
		                </div>
		              </div>
		            </div>
		          </el-form-item>
		        </el-row>
      		</el-form>
   		</el-dialog>
  </div>
</template>      	

然后一些样式：

<style scoped>

  .quill-editor {
    width: 800px;
    height: 250px;
  }

  .limit {
    margin-top: 81px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 800px;
    height: 30px;
    border: 1px solid #ccc;
    line-height: 30px;
    text-align: right;
  }

  .limit > div {
    display: inline-block;
    width: 49%;
  }

  .limit > div.limit-tip {
    text-align: left;
  }

  .limit span {
    color: #ee2a7b;
  }

  .avatar {
    display: none;
  }

  .edit_container {
    position: relative;
  }

  .pre-view {
    position: absolute;
    left: 800px;
  }

  .pre-div {
    width: 800px;
    margin: 0 auto;
  }
</style>

最后是script：

<script>
  import { quillEditor } from 'vue-quill-editor' // 调用编辑器
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  import ElDialog from '../../../../node_modules/element-ui/packages/dialog/src/component.vue'

  // 工具栏配置
  const toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
    ['blockquote', 'code-block'],

    [{'header': 1}, {'header': 2}],               // custom button values
    [{'list': 'ordered'}, {'list': 'bullet'}],
    [{'script': 'sub'}, {'script': 'super'}],      // superscript/subscript
    [{'indent': '-1'}, {'indent': '+1'}],          // outdent/indent
    [{'direction': 'rtl'}],                         // text direction

    [{'size': ['small', false, 'large', 'huge']}],  // custom dropdown
    [{'header': [1, 2, 3, 4, 5, 6, false]}],

    [{'color': []}, {'background': []}],          // dropdown with defaults from theme
    [{'font': []}],
    [{'align': []}],
    ['image'],
    ['clean']                                         // remove formatting button
  ]
  export default {
    name: 'warningContent',
    components: {
      ElDialog,
      quillEditor
    },
    data () {
      return {
        editorOption: {
          placeholder: '请输入内容',
          theme: 'snow',  // or 'bubble'
          modules: {
            toolbar: {
              container: toolbarOptions,  // 工具栏
              handlers: {
                'image': function (value) {
                  if (value) {
                    // 触发input框选择图片文件
                    document.querySelector('.avatar-uploader input').click()
                  } else {
                    this.quill.format('image', false)
                  }
                }
              }
            }
          }
        },
        quillUpdateImg: false, // 根据图片上传状态来确定是否显示loading动画，刚开始是false,不显示
        serverUrl: window.config.BASE_API + 'bus/bus/common/fileUploadController/fileUpload', // 这里写你要上传的图片服务器地址
        form: {
          content: ''
        },
        rules: {},
        contentLen: 0,
        surPlusLen: 4000,
        maxLen: 4000,
        dialogTitle: '',
        preTitle: '预览',
        dialogFormVisible: false,
        preDialogFormVisible: false,
        buttonShow: '',
        dialogImageUrl: '',
        dialogVisible: false
      }
    },
    created () {
    },
    methods: {
      computed: {
        editor () {
          return this.$refs.myQuillEditor.quill
        }
      },
      // 编辑器光标离开 将编辑器内容发射给父组件
      onEditorBlur (editor) {
//      this.$emit('getValue', this.form.content)
      },

      // 编辑器获得光标
      onEditorFocus (editor) {
        editor.enable(true) // 实现达到上限字符可删除
      },

      // 编辑器文本发生变化
      onEditorChange ({editor, html, text}) {
        let textLength = 0
        if (html && html.trim() !== '') {
          textLength = html.length
        }
        this.contentLen = textLength
        if (textLength > this.maxLen) {
          this.surPlusLen = 0
          this.$message.error('最多输入' + this.maxLen + '个字符')
          this.$refs.myQuillEditor.quill.enable(false)
        } else {
          this.surPlusLen = this.maxLen - Number(textLength)
        }
        this.$emit('getValue', this.form.content)
      },
      // 富文本图片上传前
      beforeUpload () {
        // 显示loading动画
        this.quillUpdateImg = true
      },

      uploadSuccess (response, file) {
        // response为图片服务器返回的数据
        try {
          // 获取富文本组件实例
          let quill = this.$refs.myQuillEditor.quill
          // 如果上传成功
          if (response.code === '0000') {
            // 获取光标所在位置
            let length = quill.getSelection().index
            // 插入图片  res.info为服务器返回的图片地址
            quill.insertEmbed(length, 'image', response.data.fileUrl)
            // 调整光标到最后
            quill.setSelection(length + 1)
          } else {
            this.$message.error('图片插入失败')
          }
        } catch (e) {
          console.log(e)
          this.$message.error('图片插入失败')
        } finally {
          // loading动画消失
          this.quillUpdateImg = false
        }
      },

      // 富文本图片上传失败
      uploadError () {
        // loading动画消失
        this.quillUpdateImg = false
        this.$message.error('图片插入失败')
      },

      close () { // 关闭按钮事件
        this.dialogFormVisible = false
        this.$refs['dataforms'].resetFields()
      },
      preView () {
        if (this.form.content) {
          this.preDialogFormVisible = true
        }
      }
    }
  }
</script>