vue如何将quill图片上传到服务器

通过自定义quill图片上传按钮，实现将图片上传服务器，并插入服务器地址。

<template>
    <div ref="editor"></div>
</template>

<script>
    export default {
        name: "editor",
        props: ['content'],
        data() {
            return {
                _content: '',
            }
        },
        watch: {
            //  监听父组件传递的content值，变化后更新富文本内容
            content(newVal, oldVal) {
                if (this.quill) {
                    if (newVal && newVal !== this._content) {
                        this._content = newVal;
                        this.quill.clipboard.dangerouslyPasteHTML(newVal);
                    } else if(!newVal) {
                        this.quill.setText('');
                    }
                }
            }
        },
        methods: {
            uploadToServer(file, callback) {
                var xhr = new XMLHttpRequest();
                var formData = new FormData();
                formData.append('upload', file);
                xhr.open('post', this.$ajax.defaults.baseURL + '/upload/blogUpload');
                xhr.withCredentials = true;
                xhr.responseType = 'json';
                xhr.send(formData);
                xhr.onreadystatechange = () => {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        callback(xhr.response);
                    }
                };
            }
        },
        mounted() {
            //  初始化quill
            this.quill = new Quill(this.$refs.editor, {
                theme: 'snow',
                modules: {
                    history: {
                        userOnly: true
                    },
                    toolbar: [
                        ['bold', 'italic', 'underline', 'strike'],
                        ['blockquote', 'code-block'],
                        [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                        [{ 'script': 'sub' }, { 'script': 'super' }],
                        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                        [{ 'color': [] }, { 'background': [] }],
                        [{ 'align': [] }],
                        ['clean'],
                        ['link', 'image', 'video']
                    ],
                    syntax: true
                }
            });

            //  自定义图片上传
            var toolbar = this.quill.getModule('toolbar');
            toolbar.addHandler('image', () => {
                var fileInput = toolbar.container.querySelector('input.ql-image[type=file]');
                if (fileInput == null) {
                    fileInput = document.createElement('input');
                    fileInput.setAttribute('type', 'file');
                    fileInput.setAttribute('accept', 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon');
                    fileInput.classList.add('ql-image');
                    fileInput.addEventListener('change',  () => {
                        if (fileInput.files != null && fileInput.files[0] != null) {
                            this.uploadToServer(fileInput.files[0], (res) => {
                                var range = this.quill.getSelection();
                                if (range) {
                                    fileInput.value = null;
                                    //  在当前光标位置插入图片
                                    toolbar.quill.insertEmbed(range.index, 'image', this.$ajax.defaults.baseURL + res.file.path);
                                    //  将光标移动到图片后面
                                    toolbar.quill.setSelection(range.index + 1);
                                }
                            });
                        }
                    });
                    toolbar.container.appendChild(fileInput);
                }
                fileInput.click();
            });

            //  监听富文本变化，更新父组件数据
            this.quill.on('text-change', () => {
                let html = this.$refs.editor.children[0].innerHTML;
                if (html === '<p><br></p>') html = '';
                this._content = html;
                this.$emit('edit', this._content);
            });
        }
    }
</script>

<style>
    .ql-snow .ql-editor pre.ql-syntax {
        background-color: #282c34;
        color: #abb2bf;
    }
</style>

这里面只需要关注自定义图片上传部分即可。
this.$ajax.defaults.baseURL是配置的axios的baseurl，因为我要在本地和线上地址来回切换。
不用太在意，插入自己服务器返回的实际地址就行。