当前位置: 首页 > news >正文

Vue3 setup语法糖 解决富文本编辑器上传图片64位码过长问题 quill-image-extend-module

引言:

  • 富文本编辑器传图片会解码成64位,非常长导致数据库会报错
  • 第一种方法:将数据库类型改成 mediumtext
  • 第二种办法:本文中的方法

说明,本周文所用语法糖为Vue3 setup语法,即<script setup>

思路

  • 拦截富文本编辑器上传图片功能,即点击按钮将事件绑定到inputupload的上传图片上
  • 将图片上传到自己服务器,并返回url地址
  • 将url地址存到数据库,显示的时候直接映射
第一步:安装 quill-image-extend-module
npm install quill-image-extend-module --save-dev
第二部:全局注册 main.js
// 富文本编辑器
import { QuillEditor,Quill } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import {container,QuillWatch,ImageExtend} from "quill-image-extend-module";
Quill.register('modules/ImageExtend', ImageExtend)const app = createApp(App)
app.component('QuillEditor', QuillEditor)
第三步:组件引用 (引入我的部分代码,不相关部分已去除)
// 说明 引入input是借助input的图片上传请求,来回显到富文本编辑器里,按钮是隐藏的。
<template><QuillEditorv-model:content="form.productParaImgs"contentType="html"theme="snow"ref="productParaImgsForm":options="productParaImgsEditorOption"@change="onEditorChange($event)"style="height:200px"></QuillEditor><inputtype="file"accept=".png,.jpg,.jpeg"@change="productParaImgsChange"id="productParaImgsUpload"style="display: none;border: 4px solid red"/>
</template><script setup>
import {container, ImageExtend, QuillWatch} from 'quill-image-extend-module'
const productParaImgsForm = ref(null);// 富文本编辑器 参数设置
const productParaImgsEditorOption = ref({placeholder: "请输入",theme: "snow",modules: {ImageExtend: {  // 如果不作设置,即{}  则依然开启复制粘贴功能且以base64插入name: 'img',  // 图片参数名size: 3,  // 可选参数 图片大小,单位为M,1M = 1024kbaction: '',  // 富文本服务器地址(不用)// response 为一个函数用来获取服务器返回的具体图片地址(不用)response: (res) => {},headers: (xhr) => {// 请求头,携带tokenxhr.setRequestHeader('token', window.sessionStorage.getItem('token'))},},// 核心步骤,在富文本点击图片按钮的一刻判断,走input的change事件,即-将图片上传到服务器,再返回url地址用来保存。toolbar: {container: container,  // container为工具栏,此次引入了全部工具栏,也可自行配置handlers: {'image': function (value) {  // 如果点击了富文本的图片按钮if (value) {// 触发 input的事件 (productParaImgsUpload为input的id)document.querySelector("#productParaImgsUpload").click();} else {this.quill.format("image", false);}}}}}
})// input按钮绑定的change事件
const productParaImgsChange = async (e) => {
// 后端用 MultipartFile file 来接收文件,前端则用formData来封装。let formData = new FormData();let file = e.target.files[0]; // 固定写法,可自行打印查看formData.append('file', file);// requestUitl.post 是我封装的请求,可自行改成ajaxlet result = await requestUitl.post("/sys/product/uploadImage", formData);if (result.data.code == 647) {// Vue3 setup 语法 productParaImgsForm.value.getQuill()// vue2用 this.$ref.productParaImgsForm.quilllet quill = productParaImgsForm.value.getQuill() // 获取这个富文本的光标//光标位置let length = quill.getSelection().index; // 插入图片 图片地址是拼接的 // getServerUrl()是你的请求头,替换即可// result.data.src 是后端返回的urlquill.insertEmbed(length, "image", getServerUrl() + result.data.src);  // 调整光标内容后面quill.setSelection(length + 1); }
}
</script>
后端返回类型参考
Map<String, Object> dataMap = new HashMap<>();
dataMap.put("title", newFileName);  // 文件名
dataMap.put("src", "image/product/" + newFileName); // 请求路径,拼接getServerUrl()即可用
请求封装参考

export function post(url, params = {}) {return new Promise((resolve, reject) => {httpService({url: url,method: 'post',data: params}).then(response => {resolve(response);}).catch(error => {reject(error);});});
}
export default {post,getServerUrl
}

相关文章:

Vue3 setup语法糖 解决富文本编辑器上传图片64位码过长问题 quill-image-extend-module

引言&#xff1a; 富文本编辑器传图片会解码成64位&#xff0c;非常长导致数据库会报错第一种方法&#xff1a;将数据库类型改成 mediumtext第二种办法&#xff1a;本文中的方法 说明&#xff0c;本周文所用语法糖为Vue3 setup语法&#xff0c;即<script setup> 思路 拦…...

百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><script>/*** * 百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换*///定义一些常量var x_PI = …...

论文浅尝 | CI4MRC:基于因果推断去除机器阅读理解中的名字偏差

笔记整理&#xff1a;朱珈徵&#xff0c;天津大学硕士&#xff0c;研究方向&#xff1a;问答 链接&#xff1a;https://aclanthology.org/2023.findings-acl.812/ 动机 机器阅读理解&#xff08;Machine Reading Comprehension&#xff0c;MRC&#xff09;是根据给定的文章回答…...

【校招VIP】测试计划之黑盒测试白盒测试

考点介绍&#xff1a; 黑盒测试&白盒测试是大厂和三四线公司校招的必考点。黑盒是以结果说话&#xff0c;白盒往往需要理解实现逻辑。现在商业项目的接口测试往往以白盒为主&#xff0c;也就是需要测试同学自己观察和修改数据库的值进行用例的测试。 但是无论采用哪种测试方…...

学习笔记整理-JS-01-语法与变量

文章目录 一、语法与变量1. 初识JavaScript2. JavaScript的历史3. JavaScript与ECMAScript的关系4. JavaScript的体系5. JavaScript的语言风格和特性 二、语法1. JavaScript的书写位置2. 认识输出语句3. REPL环境&#xff0c;交互式解析器4. 变量是什么5. 重点内容 一、语法与变…...

PHP之PHPExcel

include PHPExcel.php; include PHPExcel/Writer/Excel2007.php; //或者include PHPExcel/Writer/Excel5.php; 用于输出.xls的 //创建一个excel $objPHPExcel new PHPExcel(); // 输出Excel表格到浏览器下载 header(Content-Type: application/vnd.ms-excel); header(Content-…...

Redis系列(一):深入了解Redis数据类型和底层数据结构

Redis有以下几种常用的数据类型&#xff1a; redis数据是如何组织的 为了实现从键到值的快速访问&#xff0c;Redis 使用了一个哈希表来保存所有键值对。 Redis全局哈希表&#xff08;Global Hash Table&#xff09;是指在Redis数据库内部用于存储所有键值对的主要数据结构。…...

javaScript:如何获取html中的元素对象

目录 前言&#xff1a; 方法 1.通过id获取元素 2.通过标签名获取元素 3.通过类名class获取元素 获取body的方法 1.document.getElementsByTagName(body)[0] 2.document.body 相关代码 前言&#xff1a; 通过获取HTML中的元素对象&#xff0c;JavaScript可以对网页进行动…...

面试总结-webpack/git

说说你对webpack的理解 webpack 是一个静态模块打包器&#xff0c;整个打包过程就像是一条生产线&#xff0c;把资源从入口放进去&#xff0c;经过一系列的加工&#xff08;loader&#xff09;&#xff0c;最终转换成我们想要的结果&#xff0c;整个加工过程还会有监控&#x…...

深入解析美颜SDK:算法、效果与实现

在当今数字化社会中&#xff0c;图像处理和美化技术已经成为了许多应用领域的重要组成部分&#xff0c;尤其在视频直播领域&#xff0c;美颜技术更是无处不在。直播美颜SDK作为一种集成的软件工具包&#xff0c;为开发者和应用提供了强大的美颜功能。 一、算法原理 磨皮算法…...

ChatGPT Plus和ChatGPT对比

模型规模更大&#xff0c;参数数量超过6万亿&#xff0c;比ChatGPT大很多训练数据更丰富&#xff0c;包括不同语言、领域和类型的数据语言理解和生成能力更强&#xff0c;能够更准确地理解和生成文本可解释性和可控性更好&#xff0c;支持更多的调参和控制参数&#xff0c;生成…...

计算机网络 运输层 TCP连接建立、释放

三报文而不是两报文...

npm run xxx 的时候发生了什么?(以npm run dev举例说明)

文章目录 一、去package.json寻找scripts对应的命令二、去node_modules寻找vue-cli-service三、从package-lock.json获取.bin的软链接1. bin目录下的那些软连接存在于项目最外层的package-lock.json文件中。2.vue-cli-service文件的作用3.npm install 的作用 总结 一、去packag…...

图解结构体大小和位域例子

struct A {short a; char b; int c : 1; char d : 4; short e : 7; }; 备注&#xff1a;蓝色&#xff1a;表示占一个符号位空间红色&#xff1a;表示补齐其他颜色&#xff1a;实际最大值所占空间 &#xff08;1&#xff09;图解例1 st…...

游戏行业实战案例 5 :玩家在线分布

【面试题】某游戏数据后台设有“登录日志”和“登出日志”两张表。 「登录日志」记录各玩家的登录时间和登录时的角色等级。 「登出日志」记录各玩家的登出时间和登出时的角色等级。 其中&#xff0c;「角色 id 」字段唯一识别玩家。 游戏开服前两天&#xff08; 2022-08-13 至…...

TypeScript 关于对【泛型】的定义使用解读

目录 概念导读泛型函数多个泛型参数泛型约束泛型别名泛型接口泛型类总结&#xff1a; 概念导读 泛型&#xff08;Generics&#xff09;是指在定义函数、接口或类的时候&#xff0c;不预先指定具体的类型&#xff0c;而在使用的时候再指定类型的一种特性。使用泛型 可以复用类型…...

盛元广通食品药品检验检测实验室LIMS系统

随着食品与制药行业法规标准的日益提高和国家两化融合的不断推进&#xff0c;为保障检验工作的客观、公正及科学性&#xff0c;确保制药企业对于生产、实验室、物流、管理的信息化和智能化需求越来越明确&#xff0c;为确保新品可及时得到科学准确的检测检验结果&#xff0c;盛…...

【数据结构】-- 栈和队列

&#x1f407; &#x1f525;博客主页&#xff1a; 云曦 &#x1f4cb;系列专栏&#xff1a;数据结构 &#x1f4a8;吾生也有涯&#xff0c;而知也无涯 &#x1f49b; 感谢大家&#x1f44d;点赞 &#x1f60b;关注&#x1f4dd;评论 文章目录 前言一、栈&#x1f4d9;1.1 栈…...

使用SpringAop切面编程通过Spel表达式实现Controller权限控制

目录 参考一、概念SpEL表达式 二、开发引入包定义注解定义切面定义用户上下文 三、测试新建Service在方法上注解新建Service在类上注解运行 参考 SpringBoot&#xff1a;SpEL让复杂权限控制变得很简单 一、概念 对于在Springboot中&#xff0c;利用自定义注解切面来实现接口…...

Flutter:简单搞一个内容高亮

内容高亮并不陌生&#xff0c;特别是在搜索内容页面&#xff0c;可以说四处可见&#xff0c;就拿掘金这个应用而言&#xff0c;针对某一个关键字&#xff0c;我们搜索之后&#xff0c;与关键字相同的内容&#xff0c;则会高亮展示&#xff0c;如下图所示&#xff1a; 如上的效果…...

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

AtCoder 第409​场初级竞赛 A~E题解

A Conflict 【题目链接】 原题链接&#xff1a;A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串&#xff0c;只有在同时为 o 时输出 Yes 并结束程序&#xff0c;否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...

Opencv中的addweighted函数

一.addweighted函数作用 addweighted&#xff08;&#xff09;是OpenCV库中用于图像处理的函数&#xff0c;主要功能是将两个输入图像&#xff08;尺寸和类型相同&#xff09;按照指定的权重进行加权叠加&#xff08;图像融合&#xff09;&#xff0c;并添加一个标量值&#x…...

保姆级教程:在无网络无显卡的Windows电脑的vscode本地部署deepseek

文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama&#xff08;有网络的电脑&#xff09;2.2.3 安装Ollama&#xff08;无网络的电脑&#xff09;2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...

NXP S32K146 T-Box 携手 SD NAND(贴片式TF卡):驱动汽车智能革新的黄金组合

在汽车智能化的汹涌浪潮中&#xff0c;车辆不再仅仅是传统的交通工具&#xff0c;而是逐步演变为高度智能的移动终端。这一转变的核心支撑&#xff0c;来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒&#xff08;T-Box&#xff09;方案&#xff1a;NXP S32K146 与…...

AI+无人机如何守护濒危物种?YOLOv8实现95%精准识别

【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而&#xff0c;传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案&#xff0c;能够实现大范围覆盖并远程采集数据。尽管具备这些优势&#xf…...

libfmt: 现代C++的格式化工具库介绍与酷炫功能

libfmt: 现代C的格式化工具库介绍与酷炫功能 libfmt 是一个开源的C格式化库&#xff0c;提供了高效、安全的文本格式化功能&#xff0c;是C20中引入的std::format的基础实现。它比传统的printf和iostream更安全、更灵活、性能更好。 基本介绍 主要特点 类型安全&#xff1a…...

tomcat指定使用的jdk版本

说明 有时候需要对tomcat配置指定的jdk版本号&#xff0c;此时&#xff0c;我们可以通过以下方式进行配置 设置方式 找到tomcat的bin目录中的setclasspath.bat。如果是linux系统则是setclasspath.sh set JAVA_HOMEC:\Program Files\Java\jdk8 set JRE_HOMEC:\Program Files…...

Kubernetes 网络模型深度解析:Pod IP 与 Service 的负载均衡机制,Service到底是什么?

Pod IP 的本质与特性 Pod IP 的定位 纯端点地址&#xff1a;Pod IP 是分配给 Pod 网络命名空间的真实 IP 地址&#xff08;如 10.244.1.2&#xff09;无特殊名称&#xff1a;在 Kubernetes 中&#xff0c;它通常被称为 “Pod IP” 或 “容器 IP”生命周期&#xff1a;与 Pod …...

Python竞赛环境搭建全攻略

Python环境搭建竞赛技术文章大纲 竞赛背景与意义 竞赛的目的与价值Python在竞赛中的应用场景环境搭建对竞赛效率的影响 竞赛环境需求分析 常见竞赛类型&#xff08;算法、数据分析、机器学习等&#xff09;不同竞赛对Python版本及库的要求硬件与操作系统的兼容性问题 Pyth…...