IDEA中Spring MVC实现图片上传并显示

转载自：https://blog.csdn.net/weixin_42950079/article/details/88813630

我们都知道web项目需要部署到tomcat服务器中运行

那么，我们又是如何通过tomcat来访问存放在本地磁盘中的图片呢？，通过tomcat访问本地图片，需要配置虚拟路径，下面介绍两种配置虚拟路径的方式：

1、使用 IDEA 设置 虚拟路径
2、在 Tomcat 中设置 虚拟路径
如果不配置虚拟路径，我们使用Spring MVC上传的图片就无法正常显示，我在学习使用Spring MVC上传图片时就遇到过这样的问题，图片上传成功了，但无法让图片在浏览器中显示

第一种：使用 IDEA 设置 虚拟路径

1、先创建一个Spring MVC项目，将项目部署到tomcat中

2、 在Output directory目录下创建 image 文件夹，用来保存上传的图片，在编写文件上传代码时，就可以通过request.getServletContext().getRealPath("/image/"); 获取到该目录，然后指定图片上传到该目录中

request.getServletContext().getRealPath(""); 方法用于获取Output directory目录的路径

如果指定其它目录保存上传的图片，比如在WEB-INF目录下创建一个image文件夹来保存上传的图片，就不能通过String path=request.getServletContext().getRealPath("/image/"); 方法来获取该目录，它是用来获取Output directory目录的路径的

而是通过String path="E:ideaUIjavaworkspacespringmvcTestwebWEB-INFimage"; 来指定图片保存目录

 

3、Run → Edit Configurations . . . → Deployment → + → External Source . . .

4、选择保存上传图片的磁盘路径，并设置虚拟路径为/img
   配置成功后，就可以通过 localhost：8080/img/图片名称全称 访问到图片

 

第二种：在 Tomcat 中设置 虚拟路径

1、进入tomcat安装目录，找到conf文件夹下的server.xml文件

2、在标签中添加 <Context path="/img" docBase="E:ideaUIjavaworkspacespringmvcTestoutartifactsspringmvcTest_war_explodedimage" reloadable="true"/> 设置虚拟路径

path="/img"  → 是虚拟路径
docBase=“E:ideaUIjavaworkspacespringmvcTestoutartifactsspringmvcTest_war_explodedimage”   → 是磁盘中保存图片的真实目录

3、Run → Edit Configurations . . . → 勾选 Deploy applications configured in Tomcat instance

配置成功后，就可以通过 localhost：8080/img/图片名称全称 访问到图片

单个图片上传

1上传文件所需jar包

　　commons-fileupload-1.2.2.jar
　　commons-io-2.4.jar

2配置web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
version="4.0">

<!--加载spring配置文件applicationContext.xml-->
<context-param>
　　<param-name>contextConfigLocation</param-name>
　　<param-value>/WEB-INF/applicationContext.xml</param-value>
</context-param>
<listener>
　　<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
<!--配置Spring MVC的入口 DispatcherServlet, 把所有的请求都提交到该Servlet-->
<servlet>
　　<servlet-name>dispatcher</servlet-name>
　　<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
　　<load-on-startup>1</load-on-startup>
</servlet>
<!-- 配置springmvc的前端控制器，可以配置多个前端控制器来拦截不同的url -->
<servlet-mapping>
　　<servlet-name>dispatcher</servlet-name>
　　<!--将DispatcherServlet请求映射配置为 “/”,则所有的URL请求都会被Spring MVC的DispatcherServlet截获-->
　　<url-pattern>/</url-pattern>
</servlet-mapping>

在Spring MVC的配置文件dispatcher-servlet.xml中配置multipartResolver文件上传解析器

<!--multipartResolver文件上传解析器-->

<bean id="multipartResolver"
　　class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
　　<!--限制上传文件的最大字节数,1024个字节为1kB,即上传的文件不能大于100KB-->
　　<property name="maxUploadSize" value="1024000"/> <!-- 10M -->
　　<!--设置请求的编码格式为UTF-8,默认为iso-8859-1-->
　　<property name="defaultEncoding" value="UTF-8"/>
</bean>

这是dispatcher-servlet.xml文件的全部代码

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
　　xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
　　xmlns:context="http://www.springframework.org/schema/context"
　　xmlns:mvc="http://www.springframework.org/schema/mvc"
　　xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd">

　　<!--扫描器-->
　　<context:component-scan base-package="com.CD4356.controller"/>

　　<!--配置<mvc:annotation-driven>,否则无法@Controller注解无法被解析-->
　　<mvc:annotation-driven/>

　　<!--viewResolver视图解析器-->
　　<bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
　　　　<property name="prefix" value="/WEB-INF/page/"/>
　　　　<property name="suffix" value=".jsp"/>
　　</bean>

　　<!--multipartResolver文件上传解析器-->
　　<bean id="multipartResolver"
　　　　class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
　　　　<!--限制上传文件的最大字节数,1024个字节为1kB,即上传的文件不能大于100KB-->
　　　　<property name="maxUploadSize" value="1024000"/> <!-- 10M -->
　　　　<!--设置请求的编码格式为UTF-8,默认为iso-8859-1-->
　　　　<property name="defaultEncoding" value="UTF-8"/>
　　</bean>

</beans>

在WEB-INF下创建page目录，用来存放jsp、html等文件，在page中创建uploadFile.jsp文件

<form>中method="post" 和 enctype="multipart/form-data" 二者缺一不可;method="post" 以post方式提交表单，该方式对提交数据的大小没有限制

enctype="multipart/form-data" 表示数据以二进制格式进行提交，负责上传文件的表单必须为该编码类型
<input>中添加accept="image/*" ，表示提交的文件只能为图片，若没有添加该内容，则图片、文档等类型的文件都可以提交

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>单个文件上传</title>
</head>
<body>

<h2><font color="#a52a2a" size="4">图片上传</font></h2>

<form action="uploadFile" method="post" enctype="multipart/form-data">
<input type="file" name="uploadFile" accept="image/*"><br><br>
<input type="submit" value="上传">
</form>

</body>
</html>

在src代码目录下创建com.CD4356.controller包，在包中创建控制器类UploadController

在UploadController类中定义一个start方法，用来跳转到uploadFile.jsp

package com.CD4356.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class UploadController {

　　@RequestMapping(value = "start")
　　public String start(){
　　　　return "uploadFile";
　　}
}

在类中添加uploadFile()方法，用来处理上传的图片

package com.CD4356.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;
import java.util.UUID;

@Controller
public class UploadController {

    @RequestMapping(value = "start")
    public String start(){
        return "uploadFile";
    }

    // 单个图片上传
    @RequestMapping(value = "/uploadFile")
    // 使用HttpServletRequest需导入javax.servlet-api-4.0.1.jar
    // 上传的文件自动绑定到MultipartFile中
    public String uploadFile(@RequestParam("uploadFile") MultipartFile uploadFile , HttpServletRequest request) throws IOException {
        // 判断文件是否成功上传
        if(uploadFile!=null){
            // 指定上传图片的保存路径
            String path=request.getServletContext().getRealPath("/image/");
            // 获取上传的文件名全称
            String fileName=uploadFile.getOriginalFilename();
            // 获取上传文件的后缀名
            String suffix=fileName.substring(fileName.lastIndexOf("."));
            // 给文件定义一个新的名称,杜绝文件重名覆盖现象
            String newFileName= UUID.randomUUID().toString()+suffix;

            // 创建File对象,注意这里不是创建一个目录或一个文件,你可以理解为是 获取指定目录中文件的管理权限(增改删除判断等 . . .)
            File tempFile=new File(path);
            // 判断File对象对应的目录是否存在
            if(!tempFile.exists()){
                // 创建以此抽象路径名命名的目录,注意mkdir()只能创建一级目录,所以它的父级目录必须存在
                tempFile.mkdir();
            }
            // 在指定路径中创建一个文件(该文件是空的)
            File file=new File(path + newFileName);
            // 将上传的文件写入指定文件
            uploadFile.transferTo(file);
            
            // 将新文件名添加到HttpServletRequest
            request.setAttribute("newFileName",newFileName);
        }
        return "uploadFile";
    }
    
}

Spring MVC 会将上传文件绑定到 MultipartFile 对象中。MultipartFile 提供了获取上传文件内容、文件名等内容，通过其 transferTo() 还可将文件转存到硬盘中

具体如下：

　　1：byte[] getBytes()：获取文件数据
　　2：String getOriginalFilename()：获取上传文件原名全称
　　3：boolean isEmpty()：是否有上传的文件，文件是否为null
　　4：long getSize()：获取文件的字节大小，单位为byte
　　5：void transferTo(File dest)：将上传文件转存到一个目标文件中

添加图片显示功能

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>单个文件上传</title>
</head>
<body>

<h2><font color="#a52a2a" size="4">图片上传</font></h2>

<form action="uploadFile" method="post" enctype="multipart/form-data">
    <input type="file" name="uploadFile" accept="image/*"><br><br>
    <input type="submit" value="上传">
</form>

<br>
<h2><font color="#a52a2a" size="4">图片显示</font></h2>

<img src="img/${newFileName}" width="200px" height="180px">
<br>
<h4><font color="#a52a2a" size="4">文件名: ${newFileName}</font></h4>

</body>
</html>

效果图展示：

 

同时上传多个图片

在page中创建uploadMultipleFile.jsp文件

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>多个文件同时上传</title>
</head>
<body>

<div style="float:left">
<h2><font color="#a52a2a" size="4">图片上传</font></h2>
<form action="uploadMultipleFile" method="post" enctype="multipart/form-data">
    <input type="file" name="uploadFile" accept="image/*"><br><br>
    <input type="file" name="uploadFile" accept="image/*"><br><br>
    <input type="file" name="uploadFile" accept="image/*"><br><br>
    <input type="submit" value="上传">
</form>
</div>

</body>
</html>

在UploadController类中定义一个jump方法，用来跳转到uploadMultipleFile.jsp

@RequestMapping(value = "/jump")
    public String jump(){
        return "uploadMultipleFile";
    }

在UploadController类中添加uploadMultipleFile方法，用来处理同时上传的多个图片

    // 多个图片上传
    @RequestMapping(value = "/uploadMultipleFile")
    public String uploadMultipleFile(@RequestParam("files") MultipartFile[] files, HttpServletRequest request) throws IOException {
        // 文件存储路径
        String path = request.getSession().getServletContext().getRealPath("/image/");
        // 使用HashMap键值对存储上传的文件
        Map<String,Object> map=new HashMap<>();

        if(files!=null && files.length>0){
            for(int i=0;i<files.length;i++) {
                if (files[i] != null) {
                    // 获取上传的文件名
                    String fileName = files[i].getOriginalFilename();
                    // 在指定路径中创建一个文件(该文件是空的)
                    File file = new File(path + fileName);
                    // 将上传的文件写入指定路径
                    files[i].transferTo(file);
                    map.put(fileName,fileName);
                }
                request.setAttribute("map",map);
            }
        }
        return "uploadMultipleFile";
    }

在uploadMultipleFile.jsp文件中添加多个图片显示功能，使用迭代标签 <c:forEach>对图片输出显示，使用 <c:forEach>标签需导入jstl-1.2.jar包

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: CD4356
  Date: 2019/3/24
  Time: 18:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>多个文件同时上传</title>
</head>
<body>

<div style="float:left">
<h2><font color="#a52a2a" size="4">图片上传</font></h2>
<form action="uploadMultipleFile" method="post" enctype="multipart/form-data">
    <input type="file" name="files" accept="image/*"><br><br>
    <input type="file" name="files" accept="image/*"><br><br>
    <input type="file" name="files" accept="image/*"><br><br>
    <input type="submit" value="上传">
</form>
</div>

<div style="flex-flow: nowrap">
<h2><font color="#a52a2a" size="4">上传的图片</font></h2>
<table>
    <tr>
        <c:forEach items="${map}" var="image">
            <td  style=" 150px">
                <img src="img/${image.value}" width="100px" height="100px">
            </td>
        </c:forEach>
    </tr>
</table>
</div>

</body>
</html>

效果图展示：