vue中引用vue-quill-editor富文本编辑器实现图片上传

//html部分
   <div>
        <el-upload
            v-show="false"
            id="quill-upload"
            :action="serverUrl"
            name="photo"
            multiple
            :limit="3"
            list-type="picture"
            :show-file-list="false"
            :before-upload="beforeUpload"
            :on-error="uploadError"
            :on-success="handleExceed"
        >
            <el-button size="small" type="primary"></el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
        <el-row v-loading="uillUpdateImg">
            <quillEditor
                ref="myQuillEditor"
                @change="onEditorChange($event)"
                v-model="value"
                :options="editorOption"
            />
        </el-row>
        <div class="btn" @click="add">点击</div>
    </div>

//vue部分
 components: { quillEditor },
    props: ['content'],
    data() {
        return {
            uillUpdateImg: false, //根据图片上传状态来确定是否显示loading动画
            serverUrl: 'http://192.168.2.175:7070/passengerTraffic-admin/pc/uploadApi/uploadImage', //上传的图片服务器地址
            value: this.content,
            editorOption: {
                placeholder: '',
                theme: 'snow',
                modules: {
                    toolbar: {
                        container: [
                            // 工具栏配置, 默认是全部
                            ['bold'],
                            ['italic'],
                            ['underline'],
                            ['strike'],
                            [{ list: 'ordered' }, { list: 'bullet' }],
                            ['blockquote'],
                            ['code-block'],
                            ['link'],
                            ['image'],
                            [{ list: 'ordered' }, { list: 'bullet' }]
                        ],
                        handlers: {
                            image: function(value) {
                                if (value) {
                                    // 给个点击触发Element-ui，input框选择图片文件
                                    document.querySelector('#quill-upload input').click();
                                } else {
                                    this.quill.format('image', false);
                                }
                            }
                        }
                    }
                }
            }
        };
    },
    methods: {
        onEditorChange({ quill, html, text }) {
            //富文本编辑器内容发生改变的时候
            this.value = html;
            this.$emit('textChange', html); //将富文本编辑器输入的文本发送给父组件，父组件涉及提交添加或者更改
        },
        beforeUpload() {
            //上传图片之前开启loading
            this.uillUpdateImg = true;
        },
        uploadError() {
            //图片上传失败,关闭loading
            this.uillUpdateImg = false;
            this.$message.error('图片插入失败');
        },
        handleExceed(response, file, fileList) {
            //图片添加成功
            let quill = this.$refs.myQuillEditor.quill;
            console.log(response);
            if (response.code == 1) {
                let length = quill.getSelection().index;
                // 插入图片 response.data.url为服务器返回的图片地址
                quill.insertEmbed(length, 'image', response.data);
                // 调整光标到最后
                quill.setSelection(length + 1);
            } else {
                this.$message.error('图片插入失败');
            }
            this.fileList = fileList;
            this.uillUpdateImg = false;
        },
        add(){
            console.log(this.value);
        }
    }