富文本base64字符串转file文件上传

news2024/11/26 0:43:16

1.富文本以html字符串格式存储

2.以图片为例,获取img base64字符串,转为file文件

let content = ""
const regEx = /(?<=(img src="))[^"]*?(?=")/gims;
let imgs = content.match(regEx);
let fileList = [];             
for (let i = 0; i < imgs.length; i++) {
    this.dataURLtoFile(imgs[i], "log001"));
}


dataURLtoFile(dataUrl, filename) {
    let arr = dataUrl.split(',');
    let fileType = arr[0].match(/:(.*?);/)[1];
    let base64Str = window.atob(arr[1]);
    let n = base64Str .length;
    let u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, {
                type: fileType 
    });
}

 3.FormData中append文件列表,上传到服务器

 4.存储输入的富文本信息,html文件存储或保存数据库

 5.【数据库保存场景】

字段类型:longtext;

对于html字符串进行转码,处理特殊字符,避免XSS攻击; 使用  org.springframework.web.util.HtmlUtils工具类进行html处理,调用htmlEscapeHex将特殊字符转成16进制标识;解析时,使用htmlUnescape进行解码还原。

 6.【单、多文件资源路径回显】

无论base64数据转file文件放在前台还是后台都需要对img等标签的src路径进行重写

前台:已经转成file后,需要对于原html字符串中的src路径进行重写,生成一个新的字符串给后台,每个资源对应一个唯一标识,文件名称和src路径一一对应(多文件场景要求)

let index = 0;
let htmlStr = this.content.replaceAll(regEx, function () {
    index++;
    return "log-" + index;
});
for (let i = 0; i < imgs.length; i++) {
    this.dataURLtoFile(imgs[i], "log-" + (i + 1)));
}

 后台:保存传入的fileList;根据传入的文件名称获取对应保存后的文件url路径;将html字符串中与传入文件名相同的src路径replace成文件保存网络url;资源保存成功后,返回新的html字符串给前台。

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

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

相关文章

8.28day48

198. 打家劫舍 - 力扣&#xff08;LeetCode&#xff09; 知识点&#xff1a;动规五部 1.dp数组的含义&#xff1a;dp数组表示打劫改房间的最大收益 2.递推公式&#xff1a;打劫i家&#xff1a;从后往前推 我们如果打劫第i家 那么第i-1家绝对不可能背打劫 所以&#xff1a;dp…

跟这几个全日制专业相比,MBA/MEM/MPA的难度只能算小弟弟~

每年很多在职考生会因为MBA联考的难度而选择放弃&#xff0c;但实际上管理类硕士的初试难度目前来说应该是国内所有双证硕士考试中最容易的类别之一了。就从每年几个在职类专业的国家线也看得出来总体竞争并未达到十分惨的地步&#xff1a; 客观来说&#xff0c;300分总分…

免费高清图片素材库,我推荐这6个~赶紧收藏!

找高清图片素材就上这6个网站&#xff0c;我强推。免费、付费、商用的素材都能找到&#xff0c;赶紧先收藏起来吧&#xff01; 菜鸟图库 美女图片|手机壁纸|风景图片大全|高清图片素材下载网 - 菜鸟图库 网站主要为新手设计师提供免费素材&#xff0c;这些素材的质量都很高&a…

【JS真好玩】自动打字机效果

目录 一、前言二、布局分析三、总体样式四、中间部分五、底部5.1 div5.2 label5.3 input 六、JS让它动起来6.1定时器6.2 字符串处理6.2.1 slice6.2.2 splice6.3.3 split 七、总结 一、前言 大家好&#xff0c;今天实现一个自动打字机效果&#xff0c;旨在实现一些网上很小的de…

【C++题解】[广州大学附属中学-AKCSP2022信心联考]数组树

P a r t Part Part 1 1 1 读题 题目描述 w g y wgy wgy有 n n n个很不错的数&#xff0c;第 i i i个数是 a i a_i ai​&#xff0c;他想用它们组一棵数树送给 a y b ayb ayb。 a y b ayb ayb对一棵数树的喜爱程度是这棵数树的每个子树包含的数的和的总和。简单来说&#xff0…

【数据结构与算法系列1】 二分法查找

给定一个 n 个元素有序的&#xff08;升序&#xff09;整型数组 nums 和一个目标值 target &#xff0c;写一个函数搜索 nums 中的 target&#xff0c;如果目标值存在返回下标&#xff0c;否则返回 -1。 示例 1: 输入: nums [-1,0,3,5,9,12], target 9 输出: 4 解释: 9 出现…

软件与软件工程

软件 软件的概念以及特点&#xff1a; 软件是计算机系统中不可或缺的一部分&#xff0c;与硬件共同构成特定的系统功能。 人们通常把各种不同功能的程序&#xff0c;包括系统程序、应用程序、用户自己编写的程序等称为软件 软件的概念: 软件不仅包括程序&#xff0c;还包括程序…

Linux环境下的内存管理(2/7)

要想深入理解内存中的堆栈管理机制&#xff0c;孤立地分析并不是一个好方法&#xff0c;因为堆栈内存不是仅靠程序本身来维护的&#xff0c;而是由操作系统、编译器、CPU、物理内存相互配合实现的。 在 Linux 环境下运行的程序&#xff0c;在编译时链接的起始地址都是相同的&a…

vue左侧漏斗切换 echart图表动态更新

这个需求是根据点击左侧的箭头部分&#xff0c;右侧图表切换&#xff0c;左侧选中数据高亮&#xff08;图片用的svg&#xff09; 一、效果图 二、vue组件 <template><div class"funnel_wrap"><div class"flex_between"><div class&q…

家政服务小程序制作教程:从设计到开发的详细步骤

在当今的数字化时代&#xff0c;小程序已经成为了一种趋势&#xff0c;不仅提供了方便快捷的应用体验&#xff0c;也成为了各种行业进行营销和客户管理的有力工具。特别是对于家政行业&#xff0c;通过小程序的应用&#xff0c;可以更好地进行业务管理&#xff0c;提升服务质量…

自动化PLC工程师能否转到c#上位机开发?

成功从自动化PLC工程师转向C#上位机开发的经历可能因人而异&#xff0c;以下是一些分享的思路和建议&#xff1a;扩展编程技能&#xff1a;学习C#语言和相关的开发工具和框架&#xff0c;掌握语言的基础知识和常用的编程技巧。可以通过在线教程、培训课程、书籍等途径进行学习&…

深度学习-4-二维目标检测-YOLOv3理论模型

单阶段目标检测模型YOLOv3 R-CNN系列算法需要先产生候选区域&#xff0c;再对候选区域做分类和位置坐标的预测&#xff0c;这类算法被称为两阶段目标检测算法。近几年&#xff0c;很多研究人员相继提出一系列单阶段的检测算法&#xff0c;只需要一个网络即可同时产生候选区域并…

基于数据湖的多流拼接方案-HUDI实操篇

目录 一、前情提要 二、代码Demo &#xff08;一&#xff09;多写问题 &#xff08;二&#xff09;如果要两个流写一个表&#xff0c;这种情况怎么处理&#xff1f; &#xff08;三&#xff09;测试结果 三、后序 一、前情提要 基于数据湖对两条实时流进行拼接&#xff0…

AI代码生成辅助工具

有许多AI代码生成辅助工具和平台可用&#xff0c;它们可以帮助开发人员生成、优化和理解代码。以下是一些常见的AI代码生成辅助工具&#xff0c;以及它们的特点&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交…

大规模网络爬虫系统架构设计 - 云计算和Docker部署

在大规模网络爬虫系统中&#xff0c;合理的架构设计和高效的部署方式是确保系统稳定性和可扩展性的关键。本文将介绍如何利用云计算和Docker技术进行大规模网络爬虫系统的架构设计和部署&#xff0c;帮助你构建高效、可靠的爬虫系统。 1、架构设计原则 在设计大规模网络爬虫系…

字符设备驱动(内核态用户态内存交互)

前言 内核驱动&#xff1a;运行在内核态的动态模块&#xff0c;遵循内核模块框架接口&#xff0c;更倾向于插件。 应用程序&#xff1a;运行在用户态的进程。 应用程序与内核驱动交互通过既定接口&#xff0c;内核态和用户态访问依然遵循内核既定接口。 环境搭建 系统&#…

安防监控视频平台EasyCVR视频汇聚平台调用接口出现跨域现象的问题解决方案

视频监控汇聚EasyCVR可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有GB28181、RTSP/Onvif、RTMP等&#xff0c;以及厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等&#xff0c;能对外分发RTSP、RTMP、FLV、HLS、WebRTC等格式的视…

科技云报道:软件供应链安全如此重要,但为什么难以解决?

科技云报道原创。 软件供应链安全如今已经成了一个世界性难题。从2021年底Apache Log4j“核弹级”风险爆发&#xff0c;时至今日影响仍然存在&#xff0c;保障软件供应链安全已成为业界关注焦点。 但近2年时间过去了&#xff0c;软件供应链安全问题似乎并没有得以缓解&#x…

微服务事务管理(Dubbo)

Seata 是什么 Seata 是一款开源的分布式事务解决方案&#xff0c;致力于提供高性能和简单易用的分布式事务服务。Seata 将为用户提供了 AT、TCC、SAGA 和 XA 事务模式&#xff0c;为用户打造一站式的分布式解决方案。 一、示例架构说明 可在此查看本示例完整代码地址&#x…

FreeSWITCH 1.10.10 简单图形化界面6 - 配置讯时网关落地

FreeSWITCH 1.10.10 简单图形化界面6 - 配置讯时网关落地 0、 界面预览1、 创建一个话务台2、 创建PBX SIP中继并设置呼入权限3、 设置呼叫权限4、 设置分机呼出权限5、 设置FXO 网关相关信息6、 设置FXO网关呼叫路由&#xff08;呼入及呼出&#xff09;7、 查看SIP中继状态 0、…