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

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