基于SpringBoot-上传照片保存到本地，且回显照片

1：如何在数据库保存照片

将照片上传到本地后，数据库只需要保存照片名字即可(此名字是本地保存的文件的名字，通过UUID去重的名字，并不是展示照片时的照片名)。
数据表：
文件保存在本地：

2：控制层方法

**PhotoController：**SpringBoot的文件上传比较方便不需要引入其它依赖。通过SpringInitializr选择web，thymeleaf等场景即可。

@Controller
public class PhotosController {@Autowiredprivate PhotosService photosService;//负责跳转到主页，展示照片@RequestMapping("/")public String index(Model model){List<Photo> photos = photosService.list();model.addAttribute("photos",photos);return "index";}//负责跳转到添加照片页@RequestMapping("/up")public String up(){return "up";}//负责保存照片到本地@PostMapping("/upload")public String upLoad(@RequestParam("photoName")String name, @RequestPart("photo") MultipartFile photo) throws IOException {String fileName = null;if(!photo.isEmpty()){//获取源照片名String originalFilename = photo.getOriginalFilename();//获取照片后缀名String suffixName=originalFilename.substring(originalFilename.lastIndexOf('.'));//使用UUIDfileName= UUID.randomUUID().toString()+suffixName;//保存照片到磁盘photo.transferTo(new File("选择自己保存的路径(注意后面的//不要缺少)//"+fileName));}//创建photo对象Photo p=new Photo(null,name,fileName);//保存到数据库photosService.save(p);//重定向到照片展示页面return "redirect:/";}
}

3：前端文件上传表单

文件上传需要post， enctype="multipart/form-data"支持。

 <form  th:action="@{/upload}" method="post" enctype="multipart/form-data"><div>照片名：<input type="text" name="photoName"></div><div>照片：<input type="file" name="photo"></div><button type="submit">提交</button></form>

4：前端如何获取本地照片

创建并配置application.yaml： 通过spring.web.resources.static-locations配置本地访问路径

spring:servlet:multipart:max-file-size:  10MB   max-request-size:  100MB  web:resources:  static-locations:  file:自己选择保存的路径(注意后面的/不要缺少)/

前端展示照片： 这里使用thymeleaf的视图解析器，通过 <img th:src="@{/{path}(path=${p.path})}" width="20%" height="20%">访问到本地照片。
实际访问路径：http://localhost:8080/文件名

<table border="1px" cellpadding="0" cellspacing="0"><tr><th>ID</th><th>Name</th><th>Photo</th></tr><tr th:each="p:${photos}"><td th:text="${p.id}"></td><td th:text="${p.name}"></td><td><img th:src="@{/{path}(path=${p.path})}" width="20%" height="20%"></td></tr></table>

5：效果

之前ssm框架整合，也尝试了照片上传加回显，不过之前未将照片保存在本地，而是保存在服务器上，只要清理target照片就会丢失，这次保存到本次，比上次稳定点。