1 前言
在史上最简单的 Spring MVC 教程（五、六、七、八）等四篇博文中，咱们已经分别实现了“人员列表”的显示、添加、修改和删除等常见的增、删、改、查功能。接下来，也就是在本篇博文中，咱们在继续实现新的功能，即：上传图片和显示图片。
2 注解示例 - 上传及显示图片
老规矩，首先给出项目结构图：
项目结构图
2.1 显示图片
第一步：修改 web.xml 文件，拦截所有的 URL
contextConfigLocation
classpath:beans.xml
org.springframework.web.context.ContextLoaderListener
action
org.springframework.web.servlet.DispatcherServlet
contextConfigLocation
classpath:springmvc-servlet.xml
action
/
index.jsp
第二步：修改 springmvc-servlet.xml 文件，增加静态资源的管理
第三步：修改 web 目录下的 index.jsp 页面，增加跳转链接及显示图片
<%-- Created by IntelliJ IDEA. User: 维C果糖 Date: 2017/1/29 Time: 21:25 To change this template use File | Settings | File Templates. --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
Spring MVC
This is my Spring MVC!
显示人员列表
在完成以上步骤后，启动 tomcat 服务器，默认访问 http://localhost:8080/springmvc-annotation/，页面如下所示：
默认显示页面
然后，点击“显示人员列表”，将访问 http://localhost:8080/springmvc-annotation/person/all.action，页面如下所示：
显示人员列表
额外提示：在大型网站的框架中，常见的配置是动态资源和静态资源分别解析，主要有两种选择，分别是
- 第一种：Apache + tomcats（集群）
- 第二种：Nginx + tomcats（集群）
其中，Apache 和 Nginx 是负责负载均衡，即平均分配资源，同时用它们来解析静态资源，例如 JavaScript、CSS 和 Image 等；tomcat 集群负责动态资源的解析，例如 jsp 和 action 等。至于为什么会衍生出用 Nginx 代替 Apache 的第二种方案，主要是因为 Nginx 的处理速度是 Apache 的 100 倍。
2.2 上传图片
第一步：修改实体类（Person），添加图片存储路径的字段
package spring.mvc.domain;
/** * Created by 维C果糖 on 2017/1/30\. */
public class Person {
private Integer id;
private String name;
private Integer age;
private String photoPath; // 图片存储路径
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Integer getAge() {
return age;
}
public void setAge(Integer age) {
this.age = age;
}
public String getPhotoPath() {
return photoPath;
}
public void setPhotoPath(String photoPath) {
this.photoPath = photoPath;
}
@Override
public String toString() {
return "Person{" +
"id=" + id +
", name='" + name + '\'' +
", age=" + age +
'}';
}
}
第二步：修改控制器（PersonController）中的 updatePersonList 方法
package spring.mvc.controller;
import org.apache.commons.io.FileUtils;
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.multipart.MultipartFile;
import spring.mvc.domain.Person;
import spring.mvc.service.PersonService;
import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;
import java.util.List;
import java.util.Map;
/** * Created by 维C果糖 on 2017/1/26\. */
@Controller
public class PersonController {
@Resource
PersonService ps; // 注入 service 层
@RequestMapping(value = "/person/all")
public String findAll(Map model) { // 声明 model 用来传递数据
List personList = ps.findAll();
model.put("personList", personList); // 通过这一步，JSP 页面就可以访问 personList
return "/person/jPersonList"; // 跳转到 jPersonList 页面
}
@RequestMapping("/person/toCreatePersonInfo")
public String toCteatePersonInfo() { // 跳转新增页面
return "/person/jPersonCreate";
}
@RequestMapping("/person/toUpdatePersonInfo")
public String toUpdatePersonInfo(Integer id, Model model) { // 跳转修改页面
Person p = ps.get(id); // 获得要修改的记录，重新设置页面的值
model.addAttribute("p", p); // 将数据放到 response
return "/person/jPersonUpdate";
}
@RequestMapping("/person/updatePersonList")
public String updatePersonList(HttpServletRequest request, Person p, @RequestParam("photo") MultipartFile photeFile) throws IOException { // 更新人员信息
if (p.getId() == null) {
ps.insert(p); // 调用 Service 层方法，插入数据
} else {
String dir = request.getSession().getServletContext().getRealPath("/") + "/upload/";
String fileName = photeFile.getOriginalFilename(); // 原始的文件名
String extName = fileName.substring(fileName.lastIndexOf(".")); // 扩展名
fileName = fileName.substring(0, fileName.lastIndexOf(".")) + System.nanoTime() + extName; // 防止文件名冲突
FileUtils.writeByteArrayToFile(new File(dir + fileName), photeFile.getBytes()); // 写文件到 upload 目录
p.setPhotoPath("/upload/" + fileName);
ps.update(p); // 调用 Service 层方法，更新数据
}
return "redirect:/person/all.action"; // 转向人员列表 action
}
@RequestMapping("/person/deleteById")
public String deleteById(Integer id) { // 删除单条记录
ps.deleteById(id);
return "redirect:/person/all.action"; // 转向人员列表 action
}
@RequestMapping("/person/deleteMuch")
public String deleteMuch(String id) { // 批量删除记录
for (String delId : id.split(",")) {
ps.deleteById(Integer.parseInt(delId));
}
return "redirect:/person/all.action"; // 转向人员列表 action
}
}
第三步：在 jPersonUpdate.jsp 中添加 Spring 框架的标签，并重新配置 form 表单
<%-- Created by IntelliJ IDEA. User: 维C果糖 Date: 2017/1/30 Time: 18:00 To change this template use File | Settings | File Templates. --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="sf" %>
PersonList
姓名:
年龄:
图片:
第四步：修改 jPersonList.jsp 页面，添加头像显示栏
<%-- Created by IntelliJ IDEA. User: 维C果糖 Date: 2017/1/30 Time: 18:20 To change this template use File | Settings | File Templates. --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
PersonList
第五步：在 springmvc-servlet.xml 中配置“文件上传视图解析器”
在完成以上步骤后，启动 tomcat 服务器，然后访问 http://localhost:8080/springmvc-annotation/person/all.action，页面如下所示：
显示人员列表
然后，以编号为 0 的记录为例，进行测试，点击“修改”，页面如下所示：
修改人员信息
接下来，点击“选择文件”，进而选择咱们想要设置为头像的图片，点击“保存”，页面如下所示：
修改后页面回显
至此，图像的上传及显示功能，全部实现成功。