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

2023-11-02

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
                );
}

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

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

  • 1600*D. Constructing the Array(优先队列

    解析 每次找到最长的连续0序列 取其中点置为 i 优先队列维护 优先按照长度排序 相同则按照下标左优先排序 include
  • git简单使用

    git简单使用 git在本地windows安装之后 连接远程gitlab仓库 进行建立连接 checkout pull push等操作 1 与远程仓库建立连接 git remote add origin XXXXX git 2 使用git

随机推荐

  • 力扣算法练习汇总(持续更新......)

    目录标题 代码仓库地址 刷题两大技巧 1 多看题解 2 经验积累总结 一 排序篇 二 模块划分篇 1 数组 2 链表 3 哈希表 4 字符串 5 双指针 6 二叉树 7 栈 三 力扣篇 汇总 四 剑指 Offer篇 汇总 代码仓库地址 代码
  • 《机器学习实战》学习笔记(五) : sklearn中关于朴素贝叶斯的用法

    Table of Contents 1 朴素贝叶斯的分类 1 1 GaussianNB 1 1 1 以鸢尾花数据集为例 理解GaussianNB 1 1 2 实例 使用GaussianNB对鸢尾花数据集进行分类 1 1 3 实例 使用skl
  • 每节课都是一个项目 手把手用STM32打造联网气象站-12-万字讲清I2C的来龙去脉

    目录 1 IIC总线特点 1 1 主机写数据到从设备 1 2主机由从机读取数据 1 3 读写数据符合操作 1 4 具体信号描述 1 4 1起始信号和停止信号 1 4 2有效信号与无效信号 1 4 3从机地址以及读写信号 1 4 4响应信号A
  • Open3D 三维点云读取可视化、下采样、去除离群点、地面提取

    Open3D 3D数据处理的现代库 是一个开放源代码库 支持快速开发处理3D数据的软件 Open3D在C 和Python中公开了一组精心选择的数据结构和算法 后端经过高度优化 并支持并行化 推荐Python 支持Python 3 5 3 6
  • FISCO BCOS(十八)———主机虚拟机能相互ping通,ssh远程连接失败的问题解决

    经过检查日志发现是ssh服务出现了修复不了的情况 这种情况下只能彻底卸载然后再安装ssh服务了 sudo apt get remove openssh server openssh client purge y sudo apt get a
  • 【笔记】latex指定图表编号

    1 图片 begin figure h addtocounter figure 4 图片编号 4 如果图片是第2张 则编号为2 4 6 2 表格 begin table renewcommand thetable 3 表格编号需要是几大括号
  • printf打印出不同颜色的输出内容

    当打希望不同类型的打印显示不同的颜色 比如错误显示红色 正常打印显示绿色 include
  • 海思芯片上GPIO和PWM操作

    一 GPIO的配置 GPIO的设置一般为三步 1 设置gpio端口复用 2 设置GPIO口的方向 3 读取或者写入GPIO值 第一步不是每个GPIO口都是要配置的 如果你设置的GPIO端口有复用功能 那么你需要对GPIO对应复用寄存器进行配
  • Simulink搭建三相PWM整流器过程

    三相PWM整流器的基本构成 过年期间闲来无事 对PWM整流器进行了一点了解 然后用Simulink搭建了一个PWM整流器的模型 现在对这个过程进行归纳 希望对大家有帮助 首先贴出三相PWM整流器的电路简图如下图 其中V1 V2 V3是三相电
  • 左手坐标系和右手坐标系以及Unity中的世界坐标系和本地坐标系

    一 左手坐标系和右手坐标系 左手坐标系 伸开我们的左手 掌心向外 大拇指与食指成90度 中指 无名指和小指弯曲 大拇指指向的方向就是X轴正方向 食指指向的方向就是Y轴正方向 中指 无名指和小指指向的方向就是Z轴正方向 右手坐标系 伸开我们的
  • 快速突破面试算法之双指针篇

    前言 什么是双指针 砸门用大白话来说 就是两个定位装置 那么这两个定位装置有什么用呢 那肯定去定位撒 而且更高级的是这装置上面还有摄像头 可以看见当前所在位置的情况 现在我们给两个装置各自赋予动力 先赋予相同的动力 及移动速度一样 现在这两
  • 实现 vue2 中使用 vue-i18n 实现中英文切换功能

    1 下载包 版本要对应 2的版本8可以 vue3要用到9 npm install vue i18n 8 S 2 创建i18n js文件 import Vue from vue import Element from element ui i
  • 使用dd命令制作U盘启动盘

    1 插入U盘 df h查看U盘文件系统挂载情况 然后使用umount dev sdb 卸载U盘文件系统 2 执行命令 sudo mkfs vfat I dev sdb格式化U盘为FAT格式 3 dd if iso of dev sdb bs
  • vmware ubuntu与windows共享文件夹目录不显示的一种解决方法

    问题 mnt文件夹中没有共享的文件夹目录 甚至hgfs文件夹也没有 解决方法 1 我自己摸索出来的 在上图的界面 文件夹共享 下的选项选择 已禁用 点击最下方 确认 图中没有显示 被遮住了 再打开这个虚拟机设置界面 vmware界面上方工具
  • MAC强制卸载软件 如遇“不能修改或删除“*”,因为macOS需要它”

    连上小飞机后不知道怎么就下了个 流氓软件 疯狂卸载也卸载不掉 找了一个小时的攻略终于解决了 就是下面这个 很多人推荐用AppDelete这个应用卸载 尝试了一下并没有成功 用命令 sudo rm rf 应用名称 也没有卸载掉 尝试了一下解除
  • UE4 回合游戏项目 13- 生成敌人

    在上一篇 UE4 回合游戏项目 12 添加敌人受到攻击的动画 的基础上继续完成生成敌人的功能 效果 步骤 1 打开battleScenario 战斗场景 2 创建从类生成AI这个节点 现在我们需要获取到敌人的引用 以及敌人的数量 3 创建一
  • python内装饰器

    一 内置装饰器 内置装饰器 含义 classmethod 类方法 staticmethod 静态方法 二 普通方法 回顾 定义 第一个参数为self 代表 实例本身 调用 要有实例化的过程 通过 实例对象 方法名 调用 1 定义类 clas
  • 跳跃表原理

    跳跃表原理 最近看了一种数据结构叫做skipList redis和levelDB都是用了它 Skip List是在有序链表的基础上进行了扩展 解决了有序链表结构查找特定值困难的问题 查找特定值的时间复杂度为O logn 他是一种可以代替平衡
  • MySQL sku 数据批量导入_求node.js中mysql商品sku批量更新解决方案

    前提 不使用循环 1 sku具备添加 删除 修改功能 绑定数据sku sku goods id 1MJlrjS17jQ id 103 inventory 10 price 588 sku id 15617774918 sku name 黑色
  • Vue 富文本编辑器:vue-quill-editor粘贴图片上传服务器

    Vue 富文本编辑器 vue quill editor粘贴图片上传服务器 粘贴图片 vue quill editor复制图片实际上会以 base64 形式的进行一个上传 写进数据库后会导致数据一些加载问题 解决方法 将复制的图片先上传到服务