SpringMvc文件上传-CFANZ编程社区

一、案例准备：

1.1 前端提交文件注意事项

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

一、案例准备：

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;
//
//        上传文件的保存路径
        String SavePath = "D:\\Java_ReStudy\\fileUpload\\src\\main\\webapp\\imgs" + "/" + fileName;
        System.out.println("SavePath:"+SavePath);
//        保存文件
        bookFile.transferTo(new File(SavePath));
//        将图片的访问路径设置到book对象
        book.setBookImg("imgs/" + fileName);
//        调用Service中的方法
        return "tips";
    }

}

获取imgs文件路径，可以使用request提供的getSession().getServletContext().getRealpath()方法获取imgs目录的服务器的路径

//   获取imgs目录在服务器的路径
     String imgPath = request.getSession().getServletContext().getRealPath("imgs");
     System.out.println("imgPath:"+imgPath);

三、显示图书封面：

3.1 后端传值

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

  @RequestMapping("/list")
    @ResponseBody
    public String[] listImg(HttpServletRequest request) {
//        从img目录下获取所有图片信息
        String dir = "D:\\Java_ReStudy\\fileUpload\\src\\main\\webapp\\imgs";
        System.out.println(dir);
        File imgDir = new File(dir);
        String[] fileName = imgDir.list();
        return fileName;
    }

3.2 前端接收“封面信息”

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


<%@ 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++){
            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>

效果展示：

文件上传测试

案例源码下载：

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