springboot后端存储富文本内容(含图片内容)

这篇具有很好参考价值的文章主要介绍了springboot后端存储富文本内容(含图片内容)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

基本知识

springboot:后端快速应用开发框架。

tinymce:简单的富文本编辑器。

base64:Base64是网络上最常见的用于传输8Bit字节码的编码方式之一,Base64就是一种基于64个可打印字符来表示二进制数据的方法。编码规则:把3个字节变成4个字节;每76个字符加一个换行符;最后的结束符也要处理。对于图片来说,base64 编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址。

基本思路

​获取tinymce富文本编辑器的内容(html形式),通过axios发送到后端,后端接收到内容后直接存储到数据库。

步骤

1、前端配置好tinymce富文本编辑器

​配置tinymce富文本编辑器的过程参见官方文档:https://www.tiny.cloud/docs/tinymce/6/

我配置好的富文本编辑器效果如下:

springboot接收富文本内容,html,java,spring boot,Powered by 金山文档

2、获取富文本编辑器的内容,并发送至后端

​注意这里有一个问题就是图片该如何传输,我这里是直接获取base64格式的图片后直接上传,这是一个比较简单的方法。

html内容如下:

springboot接收富文本内容,html,java,spring boot,Powered by 金山文档

可以看到图片的内容极其长,这是base64格式编码导致的,不过好处是当前端请求富文本内容时,如果一篇文章中有很多图片的话,浏览器不用多次发起图片请求,而是图片和文字一起发送到了前端。

关于图片上传到富文本编辑器后转为base64格式的代码参考:https://blog.csdn.net/weixin_42919342/article/details/127901905

前端通过axios将富文本发送给后端的代码:

 axios({
        method: 'post',
        url: 'http://localhost:8081/users/news',
        data: {
          "categoryId": 1,
        "userId": 1,
        "title": "震惊!!60岁老头竟然。。。。",
        "context": tinymce.activeEditor.getContent()
        }
      }).then((res)=>{
        console.log(res.data)
      })

​还有一个方法是图片内容和文字内容分开上传,内容依旧是html格式,但是“<img src=“图片路径”>”,这里的图片路径需要重写为图片上传后存储在服务器上的路径。

3、后端在数据库创建表

​注意:存储富文本的内容的数据类型为longtext,防止内容过长无法保存

springboot接收富文本内容,html,java,spring boot,Powered by 金山文档

存储结果如下:

springboot接收富文本内容,html,java,spring boot,Powered by 金山文档

4、后端编写接收富文本内容的接口

@ApiOperation("发表新闻")
    @PostMapping("/news")
    public Result updateNews(@RequestParam Long userId,@RequestParam Integer categoryId,@RequestParam String title,@RequestParam String context){
        System.out.println("发表新闻"+context);
        Result result = new Result();
        News news = new News(categoryId,userId,title,context);
        boolean flag = newsService.save(news);
        if (!flag){
            result.setFlag(false);
            return result;
        }
        result.setFlag(true);
        return result;
    }

这里我只给了controller的代码,还有service、dao的代码相信有基础的同学可以自行编写。文章来源地址https://www.toymoban.com/news/detail-787503.html

到了这里,关于springboot后端存储富文本内容(含图片内容)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • JAVA POI的excel中包含图片进行读取保存,单张图片,多张图片

    ---------------------------------------------效果---------------------------------------------------------- 1.单张图片 2.多张图片

    2024年02月11日
    浏览(42)
  • C# 操作 Word 全域查找且替换(含图片对象)

    目录 关于全域查找且替换 Word应用样本 SqlServer数据表部分设计样本 范例运行环境 配置Office DCOM 设计实现 组件库引入 实现原理 查找且替换的核心代码 窗格内容 页眉内容 页脚内容 形状内容 小结 C#全域操作 Word 查找且替换主要包括如下四个对象: 序号 对象 说明 1 Word.Appic

    2024年04月10日
    浏览(38)
  • 【Python小技巧】使用Gradio轻松部署AI算法结果可视化Web 应用(含图片转换、验证码识别完整源码)

    随着人工智能的不断发展,各种智能算法越来越普遍,但是这些算法结果通常显示在cmd命令窗口里。有没有一种方法可以动态展示,更具需要计算后动态展现? 答案是有! 下面让我了解一下Gradio库,只需寥寥几行代码就可以展现出chatGPT的对话窗口,是不是很nice! Gradio是一

    2024年02月15日
    浏览(45)
  • 【微信小程序】使用weui组件库来实现弹出一个确认的弹窗popup,其中包含图片和名称

    在微信小程序中,你可以使用weui组件库来实现弹出一个确认的popup,并在其中包含图片和名称。以下是一个示例代码: 在wxml文件中,添加一个按钮来触发弹出确认popup: 在wxss文件中,定义确认popup的样式: 在js文件中,编写相应的逻辑来显示和隐藏确认popup,并传递图片和名

    2024年02月17日
    浏览(55)
  • 小程序内容安全检测校验文本/图片违规

    最近微信小程序遇到内容安全检测接口校验文本/图片是否含有敏感内容。 其实一开始真的很懵逼,为什么会遇到这种问题,原来现在我们所上传的图片、文本需要经过规定合法合规才能上传。比如说是色情、低俗,违法政治言论等。也许我们平常在开发的时候和运营的时候

    2024年02月13日
    浏览(43)
  • 前端:JS:将图片转为二进制与其他文本传入后端

    在前端,可以将图片转换为二进制数据,并将其与其他文本字符串一起发送到后端。一种常见的方法是将所有数据组合为一个 FormData 对象,然后通过 AJAX 或 Fetch API 将其发送给后端。以下是一个示例: 解释 : 当文件输入框内容发生变化时,会触发 change 事件。然后,它会读

    2024年04月26日
    浏览(36)
  • Java poi之word文本图片内容提取

    应公司需求,需实现以下功能 word文本内容的替换; word文本内容的提取; word文档中图片的提取存放 此文章将使用Apache POI实现Word文档中文本内容及图片的提取; Apache POI 是基于 Office Open XML 标准(OOXML)和 Microsoft 的 OLE 2 复合文档格式(OLE2)处理各种文件格式的开源项目。

    2024年02月10日
    浏览(51)
  • Java poi之Excel文本图片内容提取

    应公司需求,需实现以下功能 Excel文本内容的替换; Excel文本内容的提取; Excel中图片的提取存放 此文章将使用Apache POI实现Excel文件中文本内容及图片的提取; Apache POI 是基于 Office Open XML 标准(OOXML)和 Microsoft 的 OLE 2 复合文档格式(OLE2)处理各种文件格式的开源项目。

    2024年02月05日
    浏览(81)
  • 人人开源ueditor富文本+SpringBoot后端,配置问题解决

    目录 一、序言 二、出现的问题 三、人人开源富文本情况  四、SpringBoot后端配置 1.关于json文件 2.关于官方提供给SpringBoot的ueditor依赖 五、总结        首先博主第一次开始去使用到人人开源的富文本,在使用时几个问题解决了一天,如果你也存在我想你可以往下认真看,因

    2024年03月23日
    浏览(38)
  • React实现文本框输入文字内容动态给图片添加文字信息(多个)并生成新的图片

    收到这个需求的时候,我的内心是崩溃的,脑子里已经跑过一万匹草泥马,内心想这种事为啥不交给ps去做,哪怕是手机里图片编辑也可以做到吧,专业的事交给专业的工具去干不就好了,何必出这种XX需求。后来想想就释然了,反正拿钱干活,干啥不是干,只要给钱,再XX的

    2024年02月06日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包