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
                );
}
GitHub 加速计划 / vu / vue
207.52 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 3 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 3 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐