vue + quill富文本编辑器 实现自定义图片上传功能

<template>
    <div>
        <header-bar :title="title" :pre-page="prePage"></header-bar>
        <div>
            <input type="text" v-model="postTitle">
            <quill-editor
                v-model="postContent"
                ref="myQuillEditor"
                :options="editorOption"
                @blur="onEditorBlur($event)"
                @focus="onEditorFocus($event)"
                @change="onEditorChange($event)">
            </quill-editor>
            <button @click="submitPost">提交</button>
        </div>
        <tab-bar></tab-bar>
    </div>
</template>

<script>
    import HeaderBar from '../components/HeaderBar'
    import TabBar from '../components/TabBar'
    import Common from '../assets/js/common'
    import { Toast } from 'mint-ui';
    import  '../plugins/editor/vue-quill-editor'

    export default {
        name: 'Index',
        data () {
            return {
                title: '发布文章',
                prePage: '/',
                postTitle: '',
                postContent: '',
                editorOption: {
                    modules: {
                        toolbar: {
                            container:[
                                [{ 'header': [1, 2, 3, false] }],
                                ['bold', 'italic', 'underline', 'strike',],
                                ['blockquote', 'code-block', 'link', 'image',],
                                [{ 'color': [] }, { 'background': [] }],
                                [{ 'list': 'ordered'}, { 'list': 'bullet' }, { 'align': [] }],
                            ],
                            handlers: {'image': this.imageHandler}
                        }
                    },
                    placeholder: 'Compose an epic...',
                    readOnly: false,
                    theme: 'snow'
                },
            }
        },
        components: {
            HeaderBar,
            TabBar,
        },
        computed: {
            editor() {
                return this.$refs.myQuillEditor.quill
            }
        },
        mounted() {
            Common.checkLogin();
            // console.log('this is current quill instddddance object', this.editor)
        },
        methods: {
            onEditorBlur: function (quill) {
                // console.log('editor blur!', quill)
            },
            onEditorFocus: function (quill) {
                // console.log('editor focus!', quill)
            },
            onEditorChange: function ({ quill, html, text }) {
                // console.log('editor change!', quill, html, text)
                // this.postContent = html
            },
            submitPost: function () {
                console.log(this.postTitle);
                console.log(this.postContent);
            },
            imageHandler: function () {
                let input = document.createElement('input');
                input.setAttribute('type', 'file');
                input.setAttribute('accept', 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon');
                input.click();
                // 监听上传
                input.onchange = () => {
                    let file = input.files[0];
                    if (/^image\//.test(file.type)) {
                        this.saveImage(file);
                    } else {
                        Toast('只能上传图片哦');
                    }
                };
            },
            saveImage: function (file) {
                let fd = new FormData();
                fd.append('image', file);

                let url = 'file/image';
                this.$http.post(url, fd).then(res => {
                    if (res.status === 201) {
                        this.insertImage(res.body.data)
                    }
                }, res => {
                    if (res.status !== 0) {
                        Toast(res.status + res.body.message)
                    }
                })
            },
            insertImage: function (url) {
                let range = this.editor.getSelection();
                this.editor.insertEmbed(range.index, 'image', url)
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->