SpringBoot上传图片，以及富文本编辑器的使用

使用技术：

• springboot 2.7.3
• thymeleaf
• wangEditor 3版本
• jquery 3.6.0

SpringBoot上传图片，以及富文本编辑器的使用

WangEditor 3的使用

1. 创建一个springboot项目
2. 在前端页面完成js文件的引入

<script src="/js/wangEditor.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="/js/jquery.form.js"></script>

3.使用固定代码创建富文本编辑器，根据以下代码在富文本编辑器写入的内容会自动同步到中，后端只要获取这个标签里面的内容即可

<div id="editor" >
    <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
</div>
<textarea id="text1" style="width:100%; height:200px;"></textarea>
<!-- 引入 wangEditor.min.js -->
<script type="text/javascript">
    const E = window.wangEditor
    const editor = new E('#editor')
    // 或者 const editor = new E( document.getElementById('div1') )

    var $text1 = $('#text1')
    editor.customConfig.onchange = function (html) {
        // 监控变化，同步更新到 textarea
        $text1.val(html)
    }
    editor.customConfig.menus =[
        'head',  // 标题
        'bold',  // 粗体
        'fontSize',  // 字号
        'fontName',  // 字体
        'italic',  // 斜体
        'underline',  // 下划线
        'strikeThrough',  // 删除线
        'foreColor',  // 文字颜色
        'backColor',  // 背景颜色
        'link',  // 插入链接
        'list',  // 列表
        'justify',  // 对齐方式
        'quote',  // 引用
        'emoticon',  // 表情
        'image',  // 插入图片
        'undo',  // 撤销
        'redo'  // 重复
    ]
    // 配置服务器端地址
    editor.customConfig.uploadImgServer = '/upload'
    // 配置上传图片的参数名
    editor.customConfig.uploadFileName = 'file'
    editor.create()
    // 初始化 textarea 的值
    $text1.val(editor.txt.html())
</script>

4.编写富文本编辑器里面的上传图片功能，需要配置上传图片的参数名以及服务器的地址

// 配置服务器端地址
    editor.customConfig.uploadImgServer = '/upload'
    // 配置上传图片的参数名
    editor.customConfig.uploadFileName = 'file'

5.后端编写控制器方法，由于WangEditor对于上传图片返回值要求是

需要自定义一个pojo返回类，控制器方法是：

@RestController
public class UploadController {
    @RequestMapping("/upload")
    public WangEditorResult upload(HttpServletRequest request, MultipartFile file) throws IOException {
//        创建文件夹存放文件
//        1.创建上传文件夹的真实路径
//        String realPath = ResourceUtils.getURL("classpath:").getPath()+"/static/upload/";
        // 使用 ResourceUtils.getURL("classpath:") 获取类路径的 URL，再通过 getPath() 获取路径字符串
        // 由于路径可能包含中文，使用 URLDecoder.decode 方法以 UTF-8 编码进行解码，避免乱码
        String realPath = URLDecoder.decode(ResourceUtils.getURL("classpath:").getPath(), "UTF-8") + "/static/upload/";

//        2.判断文件夹是否存在，如果不存在创建新的文件夹
        File dir = new File(realPath);
        if(!dir.exists()){
            dir.mkdirs();
        }
//        3.拿到上传的文件名,并确保存入的文件名是唯一的
        String originalFilename = file.getOriginalFilename();
        String fileName = UUID.randomUUID()+originalFilename;
        // 对原始文件名进行 UTF-8 编码，避免中文文件名乱码
//        4.创建一个空的文件
        File newFile = new File(realPath,fileName);
//        5.将内容写入文件里面
        file.transferTo(newFile);
//        6.返回前端要的内容
        WangEditorResult wangEditorResult = new WangEditorResult();
        wangEditorResult.setErrno(0);
        String[] data = {"/upload/"+fileName};
        wangEditorResult.setData(data);
        return wangEditorResult;
    }
}

获取前端页面传来的图片的大致步骤是：
1.创建上传文件夹的真实路径，如果路径包含中文要先进行编码。

//        1.创建上传文件夹的真实路径
//        String realPath = ResourceUtils.getURL("classpath:").getPath()+"/static/upload/";
        // 使用 ResourceUtils.getURL("classpath:") 获取类路径的 URL，再通过 getPath() 获取路径字符串
        // 由于路径可能包含中文，使用 URLDecoder.decode 方法以 UTF-8 编码进行解码，避免乱码
        String realPath = URLDecoder.decode(ResourceUtils.getURL("classpath:").getPath(), "UTF-8") + "/static/upload/";

2.判断文件夹是否存在，如果不存在创建新的文件夹

        File dir = new File(realPath);
        if(!dir.exists()){
            dir.mkdirs();
        }

3.拿到上传的文件名,并确保存入的文件名是唯一的

        String originalFilename = file.getOriginalFilename();
        String fileName = UUID.randomUUID()+originalFilename;

4.创建一个空的文件，并将内容写入文件

     File newFile = new File(realPath,fileName);
//        5.将内容写入文件里面
        file.transferTo(newFile);

5.返回前端要求的值

        WangEditorResult wangEditorResult = new WangEditorResult();
        wangEditorResult.setErrno(0);
        String[] data = {"/upload/"+fileName};
        wangEditorResult.setData(data);
        return wangEditorResult;

最后效果是：

上传图片

1.编写前端页面，对于图片必须选择multipart/form-data，开启thymeleaf命名空间

<html lang="en" xmlns:th="http://www.thymeleaf.org">

<h1>上传图片测试</h1>
    <!-- 表单，用于上传图片，enctype="multipart/form-data" 确保文件能正确上传 -->
    <form id="uploadImage" enctype="multipart/form-data">
        <!-- 文件选择输入框，用户选择要上传的图片文件，name 属性用于后端接收文件数据 -->
        <input type="file" id="ImageFile" name="file">
    </form>
    <script>
        $(function (){
            // 当文件选择框的内容发生变化时，执行以下操作
            $("#ImageFile").change(function (){
                // 使用 ajaxSubmit 方法提交表单
                $("#uploadImage").ajaxSubmit({
                    // 上传的目标 URL，这里假设后端处理上传的接口是 /upload
                    url:"/upload",
                    // 请求方式为 POST
                    type:"post",
                    // 上传成功后的回调函数，result 是后端返回的数据
                    success:function (result){
                        // 将返回的图片路径设置为 img 标签的 src 属性，实现图片回显
                        $("#Image").attr("src",result.data[0])
                    }
                })
            })
        })
    </script>
    <!-- 图片标签，初始显示默认图片，th:src 是 Thymeleaf 的语法，用于动态设置图片路径 -->
    <img th:src="@{/img/no-img.png}" id="Image" width="100px" >

后端可以用上面那个方法
最后效果：