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 文件
index
基于layui的图片上传并回显的功能
项目结构如下：
然后上传功能就实现了，但是这个图片的回显始终有问题没法实现，应该是因为函数回调的时候图片存入有延迟，http没法立刻的访问到图片所以会无法回显。但是只要把存入图片的文件夹放在Tomcat服务器的文件夹里，就能够解决这个回显的问题了