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:\ideaUI\javaworkspace\springmvcTest\web\WEB-INF\image"; 来指定图片保存目录

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

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

在 Tomcat 中设置 虚拟路径

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

2、在标签中添加 <Context path="/img" docBase="E:\ideaUI\javaworkspace\springmvcTest\out\artifacts\springmvcTest_war_exploded\image" reloadable="true"/> 设置虚拟路径

• path="/img"  → 是虚拟路径
• docBase=“E:\ideaUI\javaworkspace\springmvcTest\out\artifacts\springmvcTest_war_exploded\image”   → 是磁盘中保存图片的真实目录

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

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

单个图片上传

上传文件所需jar包

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

配置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/*" ，表示提交的文件只能为图片，若没有添加该内容，则图片、文档等类型的文件都可以提交

<%--
  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>

<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() 还可将文件转存到硬盘中

具体如下：

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

添加图片显示功能

<%--
  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>

<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文件

<%--
  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="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="width: 150px">
                <img src="img/${image.value}" width="100px" height="100px">
            </td>
        </c:forEach>
    </tr>
</table>
</div>

</body>
</html>

效果图展示：