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
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/43584.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HIVE SQL通过Lateral View + explode实现列转行

原表&#xff1a; abAndy<碟中谍>,<谍影重重>,<007>MOMO<小鞋子>,<朋友啊你的家在哪里> 实现效果 abAndy<碟中谍>Andy<谍影重重>Andy<007>MOMO<小鞋子>MOMO<朋友啊你的家在哪里> 实现代码&#xff1a; selec…

STM32 F103C8T6学习笔记8:0.96寸单色OLED显示屏显示字符

使用STM32F103 C8T6 驱动0.96寸单色OLED显示屏: OLED显示屏的驱动&#xff0c;在设计开发中OLED显示屏十分常见&#xff0c;因此今日学习一下。一篇文章从程序到显示都讲通。 文章提供源码、原理解释、测试工程下载&#xff0c;测试效果图展示。 目录 OLED驱动原理—IIC通信…

无涯教程-Perl - undef函数

描述 此函数未定义EXPR的值。用于标量,列表,哈希,函数或类型范围。在带有诸如undef $hash {$key}之类的语句的哈希上使用&#xff1b;实际上将指定键的值设置为未定义的值。 如果要从哈希中删除元素,请使用delete函数。 语法 以下是此函数的简单语法- undef EXPRundef返回…

Java进阶篇--迭代器模式

目录 同步迭代器&#xff08;Synchronous Iterator&#xff09;&#xff1a; Iterator 接口 常用方法&#xff1a; 注意&#xff1a; 扩展小知识: 异步迭代器&#xff08;Asynchronous Iterator&#xff09;&#xff1a; 常用的方法 注意&#xff1a; 总结&#xff1a…

LeetCode 每日一题 2023/8/14-2023/8/20

记录了初步解题思路 以及本地实现代码&#xff1b;并不一定为最优 也希望大家能一起探讨 一起进步 目录 8/14 617. 合并二叉树8/15 833. 字符串中的查找与替换8/16 2682. 找出转圈游戏输家8/17 1444. 切披萨的方案数8/18 1388. 3n 块披萨8/19 2235. 两整数相加8/20 8/14 617. 合…

【学习FreeRTOS】第9章——FreeRTOS任务调度

1.开启任务调度器 vTaskStartScheduler() 作用&#xff1a;用于启动任务调度器&#xff0c;任务调度器启动后&#xff0c; FreeRTOS 便会开始进行任务调度【动态创建任务为例】 创建空闲任务如果使能软件定时器&#xff0c;则创建定时器任务关闭中断&#xff0c;防止调度器开…

Microsoft ISA服务器配置及日志分析

Microsoft ISA 分析器工具&#xff0c;可分析 Microsoft ISA 服务器&#xff08;或 Forefront 威胁管理网关服务器&#xff09;的日志并生成安全和流量报告。支持来自 Microsoft ISA 服务器组件的以下日志&#xff1a; 数据包过滤器ISA 服务器防火墙服务ISA 服务器网络代理服务…

透过源码理解Flutter中widget、state和element的关系

1、framework源码组成 Flutter中widget、state、element的源码位于framework.dart中&#xff0c;整个文件6693行(版本Flutter 3.12.0-14.0.pre.28)。整个代码可划分为若干部分&#xff0c;主要包括key、widget、state、element四部分。 1.1 key 关于key的代码65行到272行&am…

NVIDIA GPU驱动和CUDA工具包 Linux CentOS 7 在线安装指南

挑选指定系统和对应的GPU型号下载驱动和CUDA工具包: Linux CentOS安装NVIDIA GPU驱动程序和NVIDIA CUDA工具包_centos安装显卡驱动和cuda_Entropy-Go的博客-CSDN博客 相比之下&#xff0c;本文是在线安装NVIDIA GPU驱动和CUDA工具包方式&#xff0c;省去挑选对应正确安装包的烦…

Uniapp Syntax Error: Error: Unbalanced delimiter found in string

报错 in ./src/pages/user/components/tasks.vue?vue&typescript&langjs&Syntax Error: Error: Unbalanced delimiter found in string...这边导致文件的原因&#xff1a;可能是条件编译语法不小心删了某个字符&#xff0c;导致不全&#xff0c;无法形成一对。 //…

GuLi商城-前端基础Vue-生命周期和钩子函数

下图展示了实例的生命周期。你不需要立马弄明白所有的东西&#xff0c;不过随着你的不断学习和使用&#xff0c;它 的参考价值会越来越高。 VUE 的生命周期指的是组件在创建、运行和销毁过程中所经历的一系列事件&#xff0c;通过这些事件可以 让开发者在不同阶段进行相应的…

vue3 + antv/x6 实现拖拽侧边栏节点到画布

前篇&#xff1a;vue3ts使用antv/x6 自定义节点 前篇&#xff1a;vue3antv x6自定义节点样式 1、创建侧边栏 用antd的menu来做侧边栏 npm i --save ant-design-vue4.x//入口文件main.js内 import Antd from ant-design-vue; import App from ./App; import ant-design-vue/…

安卓的代码加固和其他安全问题

文章目录 安卓加固apk文件结构dex加固过程 其它安全问题 安卓加固 从App的加固技术来看:主流分为dex加密和so加密,目前来看保护dex文件更为重要,因为dex反编译后的java代码可读性更强。 android-ndk: Native Development Kit 官网解释&#xff1a;这套工具使您能在 Android 应…

Kvm配置ovs网桥

环境&#xff1a;部署在kvm虚拟环境上&#xff08;让虚拟机和宿主机都可以直接从路由器获取到独立ip&#xff09; 1、安装ovs软件安装包并启动服务&#xff08;一般采用源码安装&#xff0c;此处用yum安装&#xff09; yum install openvswitch-2.9.0-3.el7.x86_64.rpm syste…

Git常见操作

一、全局配置命令 配置级别&#xff1a; –local&#xff08;默认&#xff0c;高级优先&#xff09;&#xff1a;只影响本地仓库 –global(中优先级)&#xff1a;只影响所有当前用户的git仓库 –system&#xff08;低优先级&#xff09;&#xff1a;影响到全系统的git仓库 1…

【力扣】739. 每日温度 <单调栈>

【力扣】739. 每日温度 给定一个整数数组 temperatures &#xff0c;表示每天的温度&#xff0c;返回一个数组 answer &#xff0c;其中 answer[i] 是指对于第 i 天&#xff0c;下一个更高温度出现在几天后。如果气温在这之后都不会升高&#xff0c;请在该位置用 0 来代替。 …

剑指 Offer 40. 最小的k个数(C+实现)

剑指 Offer 40. 最小的k个数https://leetcode.cn/problems/zui-xiao-de-kge-shu-lcof/ 法1&#xff1a;二叉堆 通过最小堆&#xff0c;直接筛选出最小的k个数 vector<int> getLeastNumbers(vector<int>& arr, int k) {priority_queue<int, vector<int>…

YOLOv8改进后效果

数据集 自建铁路障碍数据集-包含路障&#xff0c;人等少数标签。其中百分之八十作为训练集&#xff0c;百分之二十作为测试集 第一次部署 版本&#xff1a;YOLOv5 训练50epoch后精度可达0.94 mAP可达0.95.此时未包含任何改进操作 第二次部署 版本&#xff1a;YOLOv8改进版本 首…

WebRTC | ICE详解

目录 一、Candidate种类与优先级 二、ICE策略 1. iceServers 2. iceTransportPolicy 三、P2P连接 1.Nat类型 &#xff08;1&#xff09;完全锥型NAT &#xff08;2&#xff09;IP限制锥型NAT &#xff08;3&#xff09;端口限制锥型NAT &#xff08;4&#xff09;对称…

iPhone 15受益:骁龙8 Gen 3可能缺席部分安卓旗舰机

明年一批领先的安卓手机的性能可能与今年的机型非常相似。硅成本的上涨可能是原因。 你可以想象&#xff0c;2024年许多最好的手机都会在Snapdragon 8 Gen 3上运行&#xff0c;这是高通公司针对移动设备的顶级芯片系统的更新&#xff0c;尚未宣布。然而&#xff0c;来自中国的…