spring配置环境下的文件上传以及上传的图片展示
实现的效果目的：
把本地的图片进行上传，并且保存至当前项目的tomcat服务器和数据库中，
当需要展示图片的时候，我们拿数据库中绝对路径的相对路径，这个时候就需
要在控制层进行绝对路径的处理，处理完后，就可以通过相对路径去匹配服务
器中的图片相对路径，然后进行展示
注意事项：
a.存入数据库中的是决定路径，而不是相对路径，方便查找图片在电脑中存放的服务器下的位置
b.前端页面的file的input框的name不能和数据库存放图片路径的字段一样
c.新增用户信息的时候，注意生日的日期格式，必须在实体类中birthday属性加上注解
文件上传以及展示的实现步骤:
1.导入依赖：三个jar包
junit
junit
4.11
test
org.mybatis
mybatis
3.5.6
org.mybatis
mybatis-spring
2.0.6
mysql
mysql-connector-java
5.1.48
commons-dbcp
commons-dbcp
1.4
commons-pool
commons-pool
1.6
org.springframework
spring-jdbc
5.3.1
org.springframework
spring-aop
5.3.1
aopalliance
aopalliance
1.0
org.aspectj
aspectjweaver
1.8.13
org.springframework
spring-web
5.3.1
org.springframework
spring-webmvc
5.3.1
javax.servlet
javax.servlet-api
3.1.0
provided
javax.servlet.jsp
javax.servlet.jsp-api
2.3.3
provided
jstl
jstl
1.2
log4j
log4j
1.2.17
com.github.pagehelper
pagehelper
5.2.0
commons-fileupload
commons-fileupload
1.4
commons-io
commons-io
2.6
commons-lang
commons-lang
2.6
2.springmvc的springmvc-serlvet配置文件中配置上传文件的配置信息
<?xml version="1.0" encoding="UTF-8"?>
xmlns:aop="http://www.springframework.org/schema/aop"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:tx="http://www.springframework.org/schema/tx"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xmlns:p="http://www.springframework.org/schema/p"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="
http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/aop
http://www.springframework.org/schema/aop/spring-aop.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd
http://www.springframework.org/schema/tx
http://www.springframework.org/schema/tx/spring-tx.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc.xsd">
3.useradd3.jsp页面需要一个file类型的input框
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt"%>
${uploadFileError}
${uploadFileError}
placeholder="选择文件">
placeholder="选择文件">
4.userview3.jsp查看详情页面，进行文件上传的图片展示
<%--
Created by IntelliJ IDEA.
User: liujie
Date: 2020/12/18
Time: 16:25
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
Title
用户详情展示
5.userController类中的addSave方法行为中实现多文件上传
/**
* 多文件上传
* multipartFiles[]类型的参数是和页面的file类型的input框绑定的
* 通过注解@RequestParam("multipartFiles")锁定进行获取文件上
* 传的name="multipartFiles"的标签中的信息
* @param model
* @param request
* @param user
* @param multipartFiles
* @return
*/
@RequestMapping("addSave3")
public String addSave3(Model model
,HttpServletRequest request
,User user
,@RequestParam("multipartFiles")MultipartFile[] multipartFiles){
if(multipartFiles.length>0){
for (int i=0;ifileSize){
model.addAttribute("uploadError","* 文件上传大小不能大于1mb");
return "user/useradd3";
}else if("jpg".equals(suffix)||"png".equals(suffix)
||"jpeg".equals(suffix)||"pneg".equals(suffix)){
String fileName=System.currentTimeMillis()+RandomUtils.nextInt(1000000)+"Personal.png";
File targetFile = new File(path,fileName);
if(!targetFile.exists()){
//递归创建一个文件
targetFile.mkdirs();
}
//进行文件上传
try {
multipartFiles[i].transferTo(targetFile);
if(i==0){
idPicPath=path+File.separator+fileName;
user.setIdPicPath(idPicPath);
}
if(i==1){
workPicPath=path+File.separator+fileName;
user.setWorkPicPath(workPicPath);
}
} catch (IOException e) {
e.printStackTrace();
}
}else{
model.addAttribute("uploadError","* 上传的图片格式不正确");
}
}
}
}
//调用userService的userAdd方法进行用户新增
int count = userService.userAdd(user);
if(count>0){
return "redirect:/jsp/user/query2";
}
model.addAttribute("uploadError","* 新增失败");
return "user/useradd3";
}
6.userController类中的selectById3方法行为中进行用户详情的展示，并且展示上传文件的图片
/**
* 用户的查看详情
* @param model
* @param id
* @param request
* @return
*/
@RequestMapping("selectById3")
public String selectById3(Model model
,Long id
,HttpServletRequest request){
User user = userService.queryUserById(id);
//处理数据库存储的绝对路径
String idPicPath = user.getIdPicPath();
String workPicPath = user.getWorkPicPath();
String[] arridPicPath = idPicPath.split("\\\\");
String[] arrworkPicPath = workPicPath.split("\\\\");
String idPicRelPath=arridPicPath[arridPicPath.length-1];
String workPicRelPath=arrworkPicPath[arrworkPicPath.length-1];
model.addAttribute("idPicRelPath",idPicRelPath);
model.addAttribute("workPicRelPath",workPicRelPath);
model.addAttribute("user",user);
return "user/userview3";
}
7.效果截图
1）------>用户新增页面
2）------>点击选择文件后
3）------->点击新增去userList3.jsp页面,然后点击尾页的最后一条数据
4）-------->点击查看详情，进行上传文件的图片展示成功
8.最后
文章有点长，如果你耐心地看到这，也相信你会有点收获，作者会持续进行更新，还望你的小小关注走一走