- 现在的时间:2018-10-27
- 最近在做的一个东西要显示用户上传的图片,以前使用独立的tomcat时是很容易的一件事,但SpringBoot使用集成的tomcat,所以需要配置一下。
基本思路
- 项目较小,不使用独立的文件服务器,直接将图片存在服务器的磁盘上,数据库存放图片在服务器上的绝对路径。
- 但在显示图片时<img src=“xxx”/>标签的src属性不能直接使用从数据库中取出来的绝对路径,那样图片会显示不出来。
- 为了简化问题这个demo中暂不使用数据库也不对图片的名字进行随机化处理。
准备工作
- 在springboot的全局配置文件中增加以下配置:cbs.imagesPath=file:/media/root/MyDisk/download/abcde/
- file:后面是磁盘中的目录,最后必须要有一个"/"号,我是目录是如上所示。
- 添加Thymeleaf依赖
上传图片
上传页面 index.html (这个页面直接提交给一个controller,在controller中将图片存到磁盘中)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>上传头像</title>
</head>
<body>
<form action="/fileUploadController" method="post" enctype="multipart/form-data">
上传头像:<input type="file" name="filename"/><br/><br/>
<input type="submit" value="确定"/>
</form>
</body>
</html>
存入图片的控制器
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import java.io.File;
@Controller
public class TestController
{
@Value("${cbs.imagesPath}")
private String theSetDir; //全局配置文件中设置的图片的路径
@GetMapping("/{page}")
public String toPate(@PathVariable("page") String page)
{
return page;
}
@RequestMapping(value = "/fileUploadController")
public String fileUpload(MultipartFile filename, Model model) throws Exception
{
String parentDirPath = theSetDir.substring(theSetDir.indexOf(':')+1, theSetDir.length()); //通过设置的那个字符串获得存放图片的目录路径
String fileName = filename.getOriginalFilename();
File parentDir = new File(parentDirPath);
if(!parentDir.exists()) //如果那个目录不存在先创建目录
{
parentDir.mkdir();
}
filename.transferTo(new File(parentDirPath + fileName)); //全局配置文件中配置的目录加上文件名
model.addAttribute("pic_name", fileName);
return "show";
}
}
显示图片
增加一个配置类
不需要知道这个配置类具体是怎样实现的,只需要知道这样配置后有如下效果:上传到cbs.imagesPath配置的目录中的图片,在项目中可以访问,访问是时标签的src属性的属性值是"/images/图片名.扩展名"。
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class WebAppConfig implements WebMvcConfigurer
{
@Value("${cbs.imagesPath}")
private String mImagesPath;
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry)
{
if (mImagesPath.equals("") || mImagesPath.equals("${cbs.imagesPath}"))
{
String imagesPath = WebAppConfig.class.getClassLoader().getResource("").getPath();
if (imagesPath.indexOf(".jar") > 0)
{
imagesPath = imagesPath.substring(0, imagesPath.indexOf(".jar"));
}
else if (imagesPath.indexOf("classes") > 0)
{
imagesPath = "file:" + imagesPath.substring(0, imagesPath.indexOf("classes"));
}
imagesPath = imagesPath.substring(0, imagesPath.lastIndexOf("/")) + "/images/";
mImagesPath = imagesPath;
}
LoggerFactory.getLogger(WebAppConfig.class).info("imagesPath=" + mImagesPath);
registry.addResourceHandler("/images/**").addResourceLocations(mImagesPath);
}
}
显示图片的页面 show.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>上传的图片</title>
</head>
<body>
上传的图片:
<img th:src="@{'/images/' + ${pic_name}}"/> <!--/images/xxx.xxx-->
</body>
</html>
效果
上传页面:
选择图片:
点击上传页面的确定按钮后:
下载这个demo
码云:https://gitee.com/blog_quotes/springboot-show-pic.git