springmvc+layui富文本编辑器实现图片上传及回显

流程并不复杂，直接上代码，代码中标有注释
前端代码在layui的官方文档中有，而且既然准备上传图片了，前端应该是没有问题了

<!--layedit文本区域-->
            <label class="icon1 l_width">内&nbsp;容:</label>
            <div class="div2">
                <textarea id="edit1" lay-verify="content" style="display: none;"></textarea>
            </div>

layedit.set({
  uploadImage: {
    url: '' //接口url
    ,type: '' //默认post
  }
});
//注意：layedit.set 一定要放在 build 前面，否则配置全局接口将无效。
layedit.build('demo'); //建立编辑器

后台：
pom文件中添加上传图片所需依赖

<dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.3</version>
        </dependency>
        <dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>2.3</version>
        </dependency>

springmvc配置文件中对上传文件的大小等进行控制

  <!-- 配置文件解析器-->
    <!-- 此处id为固定写法，不能随便取名-->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="maxUploadSizePerFile" value="5242880"></property>
        <property name="defaultEncoding" value="UTF-8"/>
        <property name="resolveLazily" value="true"/>
    </bean>

图片上传的控制类

package com.fh.experience.controller;

import com.fh.experience.entity.JsonResult;
import lombok.extern.slf4j.Slf4j;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
import java.util.UUID;

@RestController
@Slf4j
public class ImageUploadController {
    /**
     * 时间格式化
     */
    private SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy/MM/dd/");

    /**
     *   示例： D:/image/
     */
    private String fileSavePath="D:/image/";

    @PostMapping("/upload")
    public JsonResult uploadFile(@RequestParam("file") MultipartFile file, HttpServletRequest request) {
        //1.后半段目录：  2021/07/29即上传的年月日
        if (file.isEmpty()) {
            System.out.println("文件为空");
        }
        String directory = simpleDateFormat.format(new Date());
        /**
         *  2.文件保存目录  D:/image/2021/07/29/
         *  如果目录不存在，则创建
         */
        File dir = new File(fileSavePath + directory);
        if (!dir.exists()) {
            dir.mkdirs();
        }
        //3.给文件重新设置一个名字
        //后缀
        String suffix = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."));
        String newFileName= UUID.randomUUID().toString().replaceAll("-", "")+suffix;
        //4.创建这个新文件
        File newFile = new File(fileSavePath + directory + newFileName);
        //5.复制操作
        try {
            file.transferTo(newFile);
            //协议 :// ip地址 ：端口号 / 文件目录
            String src = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + "/image/" + directory + newFileName;
            Map<String, String> map = new HashMap<>();
            map.put("src",src);
            return JsonResult.builder().data(map).msg("上传成功！").code(0).build();
        } catch (IOException e) {
            return JsonResult.builder().data(null).msg("IO异常！").code(-1).build();
        }
    }
}

上述控制类中涉及到一个封装类

public class JsonResult implements Serializable {
    private Integer code;
    private String msg;
    private Object data;
}

因为layui要求返回值必须是以下形式

{
  "code": 0 //0表示成功，其它失败
  ,"msg": "" //提示信息 //一般上传失败后返回
  ,"data": {
    "src": "图片路径"
    ,"title": "图片名称" //可选
  }
}

以上写完后图片上传功能基本完成，但会发现图片上传成功后，前端图片无法回显，这就需要对资源路径进行映射。一般有修改tomcat中的serve.xml配置文件。这里直接在idea中进行设置。
1.打开tomcat配置

找到图片上传存储的位置，也就是上面上传控制类中的fileSavePath（D：image）目录。选择后apply-ok，重启tomcat即可