42.0、springboot-springboot 整合 layui 实现 图片上传

42.0、springboot-springboot 整合 layui 实现 图片上传

导入以下pom依赖：

    
        org.springframework.boot
        spring-boot-starter-web
    

    
        org.projectlombok
        lombok
    

    
        org.thymeleaf
        thymeleaf-spring5
    
    
        org.thymeleaf.extras
        thymeleaf-extras-java8time
    

    
        org.webjars
        layui
        2.5.7
    

第一步：创建一个springboot项目，首先来写一个文件上传的工具类 UploadUtils.java

package com.hkl.util;

import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.IOException;
import java.util.UUID;

//写一个上传的工具类
public class UploadUtils {
    //定义一个目标路径，就是我们要把图片上传到的位置
    private static final String BASE_PATH="D:\\springproject\\demo\\springboot-project-001\\fileupload-project\\src\\main\\resources\\static\\image\\";

    //定义一个图片回显的路径
    private static final String SERVER_PATH="http://localhost:8080/image/";

    public static String upload(MultipartFile file) {
        //获得上传文件的名称
        String filename = file.getOriginalFilename();
        //为了保证图片在服务器中名字的唯一性，这个是我呢要用UUID来对filename进行改写
        String uuid = UUID.randomUUID().toString().replace("_","");
        //将生成的UIDD和filename进行拼接
        String newFilename = uuid+"_"+filename;
        //创建一个文件实例对象
        File image = new File(BASE_PATH, newFilename);
        //对这个文件进行上传操作
        try {
            file.transferTo(image);
        } catch (IOException e) {
            return null;
        }
        System.out.println(SERVER_PATH+newFilename);
        return SERVER_PATH+newFilename;
    }

}

第二步：写一个pojo实体类 DataJson.java

package com.hkl.entity;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.util.Map;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class DataJson {
    private Integer code;
    private String msg;
    private Map data;
}

        这里从layui的文档中可以知道回调函数中有三个字段，分别是：code、msg、data 所以在实体类中定义

第三步：写一个controller控制器，UploadController.java

package com.hkl.controller;

import com.hkl.entity.DataJson;
import com.hkl.util.UploadUtils;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import java.util.HashMap;

//用于上传
@Controller
@RequestMapping("/upload")
public class UploadController {

    @RequestMapping("/image")
    @ResponseBody
    public DataJson uploadImage(@RequestParam(value = "file") MultipartFile file) {
        //调用我们写的上传文件的工具类
        String imagePath = UploadUtils.upload(file);//获得图片路径
        DataJson dataJson = new DataJson();
        if(imagePath!=null) {
            dataJson.setCode(1);
            dataJson.setMsg("上传成功");
            HashMap map = new HashMap<>();
            map.put("src",imagePath);
            dataJson.setData(map);
        }else {
            dataJson.setCode(0);
            dataJson.setMsg("对不起，上传失败");
        }
        return dataJson;
    }

}

第四步：创建一个/templates/index.html 文件

    
    
    
    

    





    基于layui的图片上传并回显的功能



    

        

            

                

                    图片描述
                    

                        
                    
                

                

                    上传图片
                    

                        
                            上传图片
                        
                    
                

                

                    图片预览
                    

                        
                    
                

                

                    

                        立即提交
                        重置
                    
                
            
        
    

项目结构如下：

        然后上传功能就实现了，但是这个图片的回显始终有问题没法实现，应该是因为函数回调的时候图片存入有延迟，http没法立刻的访问到图片所以会无法回显。但是只要把存入图片的文件夹放在Tomcat服务器的文件夹里，就能够解决这个回显的问题了