SpringMvc文件上传与下载

暇光曙墨

已于 2022-05-03 22:05:31 修改

阅读量1.6k

点赞数 6

分类专栏： Spring框架文章标签：前端

于 2022-05-02 14:14:26 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45295447/article/details/124538828

版权

Spring框架专栏收录该内容

11 篇文章

订阅专栏

在开发过程中，我们难免遇到提交文件以及下载文件的情况，本篇文章将详细为大家讲解文件上传预与下载，以及上传与下载过程中的注意事项。

案例：添加图书并同时提交图书封面在页面中显示，同时下载图书封面到本地

一、案例准备：

1.1 前端提交文件注意事项：

表单提交方式为post
表单的设置为“非压缩传输”，enctype="multipart/form-data"


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<%--enctype="multipart/form-data"非压缩式提交--%>
<form action="book/add" method="post" enctype="multipart/form-data">
    <p>图书名称:<input type="text" name="bookName"/></p>
    <p>图书作者:<input type="text" name="bookAuthor"/></p>
    <p>图书价格:<input type="text" name="bookPrice"/></p>
    <p>图书封面:<input type="file" name="bookFile"/></p>
    <p><input type="submit" value="提交"/></p>
</form>
</body>
</html>

1.2 控制器接受数据和文件注意事项：

1、SpringMvc处理上传文件需要借助于commousMultiPartResolver文件解析器，所以要添加commons-io、commons-fileupload依赖

 <dependency>
      <groupId>commons-io</groupId>
      <artifactId>commons-io</artifactId>
      <version>2.11.0</version>
    </dependency>
    <!-- https://mvnrepository.com/artifact/commons-fileupload/commons-fileupload -->
    <dependency>
      <groupId>commons-fileupload</groupId>
      <artifactId>commons-fileupload</artifactId>
      <version>1.3.1</version>
    </dependency>

2、在Spring-mvc.xml中配置commousMultiPartResolver文件解析器

  <!--配置文件解析器-->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <!--配置限制上传文件大小-->
        <property name="maxUploadSize" value="10240000"/>
        <!--配置最大缓存大小-->
        <property name="maxInMemorySize" value="10240000"/>
        <!--配置文件上传的编码格式-->
        <property name="defaultEncoding" value="utf-8"/>
    </bean>

二、控制器接收文件：

在处理文件上传的方法中控制器接收前端传递过来的数据，基本属性可以用对象接收，文件类型的数据使用MultPartFile接收，使用MultPartFile接收前端文件数据的时候，属性名要与表单“name”保持一致

package com.xgsm.Controllers;

import com.xgsm.pojo.Book;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

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

/**
 * Description: SpringmvcFile
 * Created by WuHuaSen .
 * Created Date:  2022/5/1 13:12
 * Version:  V1.0
 */
@Controller
@RequestMapping("/book")
public class BookController {
    @RequestMapping("/add")
    public String addBook(Book book, MultipartFile bookFile, HttpServletRequest request) throws IOException {
        System.out.println("----add");
        //        bookFile就表示上传的图片
//        截取上传文件的后缀名，生成新的文件名
        String originalFilename = bookFile.getOriginalFilename();
//        截取后缀名
        String substring = originalFilename.substring(originalFilename.lastIndexOf("."));
//         生成一个新的文件名
        String fileName = System.currentTimeMillis() + substring;
//        获取imgs目录在服务器的路径
        String imgPath = request.getSession().getServletContext().getRealPath("imgs");
        System.out.println("imgPath:"+imgPath);


//        上传文件的保存路径
        String SavePath = imgPath + "/" + fileName;
        System.out.println("SavePath:"+SavePath);
//        保存文件
        bookFile.transferTo(new File(SavePath));
//        将图片的访问路径设置到book对象
        book.setBookImg("imgs/" + SavePath);
//        调用Service中的方法
        return "tips";
    }

 
}

三、显示图书封面：

3.1 后端传值

前端传值使用ajax异步请求，后端传递数据的时候使用@ResponseBody注解，将值传到前端

  @RequestMapping("/list")
    @ResponseBody
    public String[] listImg(HttpServletRequest request) {
//        从img目录下获取所有图片信息
        String dir = request.getSession().getServletContext().getRealPath("imgs");
        System.out.println(dir);
        File imgDir = new File(dir);
        String[] fileName = imgDir.list();

        return fileName;
    }

3.2 前端接收“封面信息”

前端传值使用ajax异步请求，在Bootstrap中文网中找到一个缩略图样式，回显图片封面的时候将html代码进行拼接。

<%--
  Created by IntelliJ IDEA.
  User: 25037
  Date: 2022/5/1
  Time: 13:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

<body>
<h1>图片列表</h1>
<div class="row" id="container">

</div>
</body>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
    $.get("book/list",function (res) {

        for(var i=0;i< res.length;i++){
            alert(res[i])
            var fn = res[i];
            var  htmlStr = " <div class='col-lg-2 col-sm-4 col-md-3 col-xs-6'><div class='thumbnail'><img src='imgs/"+fn+"' alt='...'><div class='caption'><h3>Thumbnail label</h3><p>...</p><p><a href='#' class='btn btn-primary' role='button'>下载</a></p></div></div></div>"
        $("#container").append(htmlStr);
        }
    },"json")
</script>
</html>

四、文件下载 :

文件下载功能分为两部分：第一部分，前端点击下载按钮，传给控制器一个当前图片的“图片名”，第二部分，控制器获取缓存区imgs文件夹的路径信息，将传递过来的“图片名”进行拼接，生成图片流，使用响应头将图片另存为即可完成下载功能。

注意：下载实现过程中要将数据类型设置为“浏览器无法识别的类型”，例如exe文件类型

第一部分：前端代码如下：

<%--
  Created by IntelliJ IDEA.
  User: 25037
  Date: 2022/5/1
  Time: 13:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

<body>
<h1>图片列表</h1>
<div class="row" id="container">

</div>
</body>

<script type="text/javascript">
    $.get("book/list",function (res) {

        for(var i=0;i< res.length;i++){
            var fn = res[i];
            var  htmlStr = " <div class='col-lg-2 col-sm-4 col-md-3 col-xs-6'><div class='thumbnail'><img src='imgs/"+fn+"' alt='...'><div class='caption'><h3>Thumbnail label</h3><p>暇光曙墨</p><p><a href='book/download?fname="+fn+"' class='btn btn-primary' role='button'>下载</a></p></div></div></div>"
        $("#container").append(htmlStr);
        }
    },"json")
</script>
</html>

第二部分：控制器代码如下：

   @RequestMapping("/download")
    public  void  downLoad(String fname, HttpServletRequest request, HttpServletResponse response) throws Exception {
//        获取imgs文件夹路径
         String dir = request.getSession().getServletContext().getRealPath("imgs");
//         获取图片的路径
         String filepath = dir+"/"+fname;
//         原图片文件的流
        FileInputStream inputStream = new FileInputStream(filepath);
//        设置用户数据类型
        response.setContentType("application/exe");
//        响应头--另存为
        response.addHeader("Content-Disposition","attachment;filename="+fname);
        IOUtils.copy(inputStream,response.getOutputStream());

    }

案例测试：

SpringMvc文件上传与下载案例演示

案例源码下载：

链接：https://pan.baidu.com/s/1z3LdwrL2xZDsKpjDYD-CBw
提取码：xs51