Vue Tinymce富文本组件实现粘贴立即上传到后台功能

 核心代码

          urlconverter_callback: function(url, node, on_save, name) {if (node === 'img' && url.startsWith('blob:')) {tinymce.activeEditor && tinymce.activeEditor.uploadImages()}return url;},

该代码的具体所在位置

data() {return {//初始化配置init: {//menubar: true, // 菜单栏显隐//language_url: "@/components/tinymce/langs/zh_CN.js",language_url: '../static/tinymce/langs/zh_CN.js', // vue-cli2.xlanguage: "zh_CN",//skin_url: "@/components/tinymce/skins/ui/oxide",skin_url: '../static/tinymce/skins/ui/oxide', // vue-cli2.xcontent_css: 'src/assets/fonts/FZHei.css,src/assets/fonts/FZXBSJW.css',// vue-cli2.xheight: 630,min_height: 570,max_height: 970,toolbar_mode: "wrap",plugins: this.plugins,toolbar: this.toolbar,pasteAsPlainText: true,content_style: "p {margin: 5px 0;} img {max-width:100%;}",fontsize_formats: "12px 14px 16px 18px 24px 36px 48px 56px 72px",font_formats:"微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;小标宋=FZXiaoBiaoSong;方正黑体=FZHei,sans-serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;",branding: false,paste_data_images: true,// 粘贴图片后自动上传urlconverter_callback: function(url, node, on_save, name) {if (node === 'img' && url.startsWith('blob:')) {tinymce.activeEditor && tinymce.activeEditor.uploadImages()}return url;},// 图片上传images_upload_handler: (blobInfo, success, failure) => {// const img = 'data:image/jpeg;base64,' + blobInfo.base64()// success(img)const formData = new FormData()formData.append('file', blobInfo.blob())formData.append('biz', 'rich')let url = config.configData.api_url  + "/sys/common/uploadA";utils.httpFile(url,formData).then((res) => {console.log('===============',res.data);let filePath = res.data.result.file;success(filePath);})}},content: this.value};},

实现上传的前端代码

          // 图片上传images_upload_handler: (blobInfo, success, failure) => {// const img = 'data:image/jpeg;base64,' + blobInfo.base64()// success(img)const formData = new FormData()formData.append('file', blobInfo.blob())formData.append('biz', 'rich')let url = config.configData.api_url  + "/sys/common/uploadA";utils.httpFile(url,formData).then((res) => {console.log('===============',res.data);let filePath = res.data.result.file;success(filePath);})}

java后端代码

@RequestMapping(value = "/upFiles", method = RequestMethod.POST)public Result<?> upFiles(HttpServletRequest request, HttpServletResponse response) {MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;String fileType = request.getParameter("fileType");List<String> result = new ArrayList<>();Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();for (Map.Entry<String, MultipartFile> entity : fileMap.entrySet()) {MultipartFile file = entity.getValue();// 获取上传文件对象try {String fileName = file.getOriginalFilename();String newFile = "";String path = uploadpath + "/" + fileType;if (fileName.equals("blob")) {newFile = UUID.randomUUID().toString().replace("-", "")  + ".png";} else {String extName = fileName.substring(fileName.lastIndexOf("."));newFile =  UUID.randomUUID().toString().replace("-", "") + extName;}File dest = new File(new File(path).getAbsolutePath()+ "/" + newFile);File dir = new File(path);if (!dir.exists()) {dir.mkdirs();}file.transferTo(dest); // 保存文件result.add(fileType + File.separator + newFile);} catch (Exception e) {return Result.error("文件导入失败:" + e.getMessage());}}if (result.size() > 0) {return Result.OK(result);} else {return Result.error("文件导入失败!");}}

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

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

相关文章

[FUNC]判断窗口在哪一个屏幕上

#Requires AutoHotkey v2.0#z:: { ToolTip "Notepad窗口所在显示屏是&#xff1a;" GetMonitor() } GetMonitor() {CoordMode("Mouse", "Screen"); MouseGetPos &mx, &myWinGetPos &mx, &my,,,"ahk_class Notepad"…

【Spring Boot】忽视日志吃大亏手把手教你学习Spring Boot日志

文章目录 前言一、日志重要吗二、日志分级三、常用日志插件四、外观模式与SLF4J五、双雄之争总结 前言 不知有多少人和笔者一样&#xff0c;在刚学习编程的时候&#xff0c;对日志并不重视。那时候学习java代码是用System.out.println()&#xff0c;相信屏幕前不少人一开始也是…

【小布_ORACLE笔记】Part11-6 RMAN Backups

【小布_ORACLE笔记】Part11-6 RMAN Backups 1.track文件的作用 当做差异性备份时&#xff0c;server process对应的RMAN客户端的server process就不用去每个块每个块的检查&#xff0c;只要到trackfile 里面去读一下&#xff0c;看哪个块改变了就直接把哪个块备份下来&#x…

matlab 混沌动力学行为-分岔图-李雅普指数等

1、内容简介 略 24-可以交流、咨询、答疑 2、内容说明 混沌动力学行为-分岔图-李雅普指数等 包含各种类型的混沌模型求解&#xff0c;包含其分叉图、李雅普指数等 混沌、分叉图、李雅普指数 3、仿真分析 略 4、参考论文 略 链接&#xff1a;https://pan.baidu.com/…

无限移动的风景 css3 动画 鼠标移入暂停

<style>*{margin:0;padding:0;/* box-sizing: border-box; */}ul{list-style: none;}#nav{width:900px;height:100px;border:2px solid rgb(70, 69, 69);margin:100px auto; overflow: hidden;}#nav ul{animation:moving 5s linear infinite;width:200%; /*怎么模拟动画…

【已解决】Cannot find project Scala library 2.11.8 for module XXX

问题描述 在 flink 示例程序调试过程中&#xff0c;reload project 报错 Cannot find project Scala library 2.11.8 for module HbasePrint 报错如下图所示&#xff1a; 问题解决 经过搜索&#xff0c;初步判定是 pom 文件中 Scala 版本配置和项目中实际使用的版本不一致导…

在 SQL Server 中备份和恢复数据库的最佳方法

在SQL Server中&#xff0c;创建备份和执行还原操作对于确保数据完整性、灾难恢复和数据库维护至关重要。以下是备份和恢复过程的概述&#xff1a; 方法 1. 使用 SQL Server Management Studio (SSMS) 备份和还原数据库 按照 SSMS 步骤备份 SQL 数据库 打开 SSMS 并连接到您…

什么是OV SSL证书?

OV SSL证书是组织验证SSL证书的缩写&#xff0c;是三个SSL验证级别之一的名称。 OV是指实名类型的SSL证书&#xff0c;这个实名其实只要证明发布者身份就可以签发&#xff0c;无论是个人还是企业都可以进行申请。 SSL证书大家都知道就是用于网站地址的http改成https加密协议的…

PAC代理和HTTP代理的区别

PAC代理和HTTP代理都是网络代理的形式&#xff0c;但它们有一些区别。 PAC代理&#xff08;Proxy Auto-Config&#xff09;&#xff1a;PAC代理是一种根据特定规则自动选择代理服务器的方式。通过使用一个PAC文件&#xff08;通常是一个JavaScript文件&#xff09;&#xff0c;…

crui_lvgl 一个LVGL的DSL辅助工具的设想

设想 Target以LVGL为目标&#xff0c;语法以CSS为Reference。 CSS 规范 略 CSS规范最强大的属于CSS自身的属性很多&#xff0c;可以通过class和伪属性选择器对UI进行直接控制。 QML规范 ApplicationWindow {visible: truewidth: Constants.widthheight: Constants.height…

Redis部署-主从模式

目录 单点问题 主从模式 解析主从模式 配置redis主从模式 info replication命令查看复制相关的状态 断开复制关系 安全性 只读 传输延迟 拓扑结构 数据同步psync replicationid offset psync运行流程 全量复制流程 无硬盘模式 部分复制流程 积压缓冲区 实时复…

如何生成纯文本的目录树

参考资料&#xff1a; https://ascii-tree-generator.com/ 无需多言&#xff0c;感谢这些前辈的智慧。界面如下&#xff1a;

河南省第一届职业技能大赛网络安全项目试题

河南省第一届职业技能大赛 网络安全项目试题 一、竞赛时间 总计&#xff1a;420分钟 竞赛阶段 竞赛阶段 任务阶段 竞赛任务 竞赛时间 分值 A模块 A-1 登录安全加固 240分钟 200分 A-2 Web安全加固&#xff08;Web&#xff09; A-3 流量完整性保护与事件监控&am…

【AB平台数据建设】从实验平台到数据管道

文章目录 前言1.从AB实验平台聊起(1)AB平台在业务中的发挥那些作用(2)AB平台进行实验工作流介绍 2.实验平台底层数据管道最小MVP解构(1)数据管道数据从哪里来&#xff1f;(2)数据管道的输出数据有哪些&#xff1f; 小结 前言 AB实验平台是一种通过小范围放量&#xff0c;测试不…

Python 网络爬虫(一):HTML 基础知识

《Python入门核心技术》专栏总目录・点这里 文章目录 1. 什么是 HTML2. HTML 的特点3. HTML 的标签和属性4. HTML 的结构4.1 文档类型声明4.2 根元素4.3 头部部分4.4 主体部分4.5 表格标签4.6 区块4.7 嵌套和层次结构4.8 表单4.9 注释 5. HTML 交互事件 大家好&#xff0c;我是…

Clickhouse表引擎的总结

官方文档https://clickhouse.com/docs/en/engines/table-engines MergerTree引擎家族&#xff0c;只要带MergerTree的就是 MergerTree ReplicatedMergeTree ReplicatedAggregatingMergeTree ReplicatedReplacingMergeTree ReplicatedSummingMergeTree ReplacingMergeTree Summ…

MySQL的安装步骤教程以及基本操作--详细讲解

MySQL的安装过程以及使用 安装步骤安装MariaDB&#xff1a;配置&#xff1a;查看配置&#xff1a; 数据库的基本操作库的操作&#xff1a;数据类型数据库表的操作&#xff1a;表中数据的增删改查&#xff1a;表中数据的增删改查(进阶)&#xff1a;子集索引数据库事务&#xff1…

#zookeeper集群+kafka集群

kafka3.0之前是依赖于zookeeper的。 zookeeper是开源&#xff0c;分布式的架构。提供协调服务&#xff08;Apache项目&#xff09; 基于观察者模式涉及的分布式服务管理架构。 存储和管理数据。分布式节点上的服务接受观察者的注册。一旦分布式节点上的数据发生变化&#xf…

公共英语三级阅读理解一篇,附带答案

公共英语三级阅读理解 The food we eat seems to have profound effects on our health&#xff0e;Although science has made enormous steps in making food more fit to eat, it has, at the same time, made many foods unfit to eat&#xff0e;Some research has shown…

【快速见刊|投稿优惠】2024年机电一体与自动化技术国际学术会议(IACMAT 2024)

2024年机电一体与自动化技术国际学术会议(IACMAT 2024) 2024 International Academic Conference on Mechatronics and Automation Technology(IACMAT 2024) 一【会议简介】 2024年机电一体与自动化技术国际学术会议(IACMAT 2024)即将召开&#xff0c;它以“机电一体&#xff0…