Vue 富文本编辑器:vue-quill-editor粘贴图片上传服务器

Vue 富文本编辑器:vue-quill-editor粘贴图片上传服务器

粘贴图片：vue-quill-editor复制图片实际上会以 base64 形式的进行一个上传，写进数据库后会导致数据一些加载问题
**解决方法：**将复制的图片先上传到服务器，再将服务器返回的图片链接地址插入img标签中

优化：

mounted() {
                this.editor = this.$refs.myQuillEditor.quill;
                addQuillTitle();
                let quill = this.$refs.myQuillEditor.quill;
                quill.root.addEventListener(
                    "paste",
                    (evt) => {
                        if (
                            evt.clipboardData &&
                            evt.clipboardData.files &&
                            evt.clipboardData.files.length
                        ) {
                            evt.preventDefault();
                            [].forEach.call(evt.clipboardData.files, (file) => {
                                if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {
                                    return;
                                }
                                const formData = new FormData();
                                formData.append("file", file);
                                this.$axios.post(`${this.$Tools.Conts.domain}uploads`, formData).then(
                                    res => {
                                        if (res.data.code == 0) {
                                            console.log(res.data.data.src)
                                            // window.open(res.data.data.src)
                                            let length = quill.getSelection().index; //光标位置
                                            // 插入图片地址
                                            quill.insertEmbed(length, "image", res.data.data.src);
                                            // 光标后移一位
                                            quill.setSelection(length + 1);
                                        } else {
                                            console.log(res.data)
                                            this.$message({
                                                message: res.data.message,
                                                type: 'warning'
                                            });
                                        }
                                    })

                            });
                        }
                    },
                    false
                );
}