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,因为我要在本地和线上地址来回切换。
不用太在意,插入自己服务器返回的实际地址就行。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 222,104评论 6 515
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 94,816评论 3 399
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 168,697评论 0 360
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,836评论 1 298
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,851评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 52,441评论 1 310
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,992评论 3 421
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,899评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,457评论 1 318
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,529评论 3 341
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,664评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 36,346评论 5 350
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 42,025评论 3 334
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,511评论 0 24
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,611评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 49,081评论 3 377
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,675评论 2 359