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字符串给前台。