SpringMvc文件上传下载一条龙服务教会你-阿里云开发者社区

1.前言

什么是SpringMvc框架？

SpringMVC就是一个Spring内置的MVC框架。

MVC框架，它解决WEB开发中常见的问题(参数接收、文件上传、表单验证、国际化等等)，而且使用简单，与Spring无缝集成。支持 RESTful风格的URL请求。

什么是SpringMvc框架作用？

Spring MVC框架是Spring框架的一个模块，用于支持Web应用程序的开发。它采用了MVC（Model-View-Controller）设计模式，将应用程序的业务逻辑、视图和用户请求处理分离，从而提高了应用程序的可维护性、可扩展性和可测试性。

2.文件如何上传

2.1公共文件跳转

这个类是方便我们少写重复跳转页面的代码需要跳什么页面jsp的请求上加上/page即可。

package com.sy.web;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
/**
 * @author 谌艳
 * @site www.shenyan.com
 * @create 2023-09-08 17:18
 */
@Controller
@RequestMapping("/page")
public class InputController {
    @RequestMapping("/{page}")
    public String to(@PathVariable("page") String page){
        return page;
    }
    @RequestMapping("/{dir}/{page}")
    public String to(@PathVariable("dir") String dir,
                     @PathVariable("page") String page){
        return dir+"/"+page;
    }
}

2.2.添加依赖

先导入pom.xml依赖文件,处理文件上传的Java库。

<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.3.3</version>
</dependency>

2.3.配置文件上传解析器

将配置文件放入Spring-mvc.xml中

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <!-- 必须和用户JSP 的pageEncoding属性一致，以便正确解析表单的内容 -->
    <property name="defaultEncoding" value="UTF-8"></property>
    <!-- 文件最大大小(字节) 1024*1024*50=50M-->
    <property name="maxUploadSize" value="52428800"></property>
    <!--resolveLazily属性启用是为了推迟文件解析，以便捕获文件大小异常-->
    <property name="resolveLazily" value="true"/>
</bean>

2.4.图片路径配置Tomcat

为了后期维护，将本地图片路径与Tomcat访问路径进行配置文件的保存。

public class PropertiesUtil {
  public static String getValue(String key) throws IOException {
    Properties p = new Properties();
    InputStream in = PropertiesUtil.class.getResourceAsStream("/resource.properties");
    p.load(in);
    return p.getProperty(key);
  }
}

resource.properties

dir=E:/temp/
server=/temp/

2.5.前端代码

index.jsp 主页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib uri="http://jsp.veryedu.cn" prefix="z"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link
            href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.css"
            rel="stylesheet">
    <script
            src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.js"></script>
    <title>书籍后来管理系统</title>
    <style type="text/css">
        .page-item input {
            padding: 0;
            width: 40px;
            height: 100%;
            text-align: center;
            margin: 0 6px;
        }
        .page-item input, .page-item b {
            line-height: 38px;
            float: left;
            font-weight: 400;
        }
        .page-item.go-input {
            margin: 0 10px;
        }
    </style>
</head>
<body>
<form class="form-inline"
      action="${pageContext.request.contextPath }/book/list" method="post">
    <div class="form-group mb-2">
        <input type="text" class="form-control-plaintext" name="bname"
               placeholder="请输入书籍名称">
        <!--      <input name="rows" value="20" type="hidden"> -->
        <!-- 不想分页 -->
        <input name="pagination" value="false" type="hidden">
    </div>
    <button type="submit" class="btn btn-primary mb-2">查询</button>
    <a class="btn btn-primary mb-2" href="${pageContext.request.contextPath }/book/preSave">新增</a>
</form>
<table class="table table-striped">
    <thead>
    <tr>
        <th scope="col">书籍编号</th>
        <th scope="col">书籍名称</th>
        <th scope="col">书籍图片</th>
        <th scope="col">书籍价格</th>
        <th scope="col">操作</th>
    </tr>
    </thead>
    <tbody>
    <c:forEach  var="b" items="${list }">
        <tr>
            <td>${b.bid }</td>
            <td>${b.bname }</td>
            <td>
                <img src="${b.bimage }" style="height: 100px;width: 60px" >
            </td>
            <td>${b.price }</td>
            <td>
                <a href="${pageContext.request.contextPath }/book/preSave?bid=${b.bid}">修改</a>
                <a href="${pageContext.request.contextPath }/book/del?bid=${b.bid}">删除</a>
                <a href="${pageContext.request.contextPath }/page/book/upload?bid=${b.bid}">上传图片</a>
                <a href="${pageContext.request.contextPath }/book/download?bid=${b.bid}">下载图片</a>
            </td>
        </tr>
    </c:forEach>
    </tbody>
</table>
<!-- 这一行代码就相当于前面分页需求前端的几十行了 -->
<z:page pageBean="${pageBean }"></z:page>
</body>
</html>

upload.jsp

<%--
  Created by IntelliJ IDEA.
  User: 86177
  Date: 2023/9/9
  Time: 14:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>书籍logo上传</title>
</head>
<body>
<form action="${pageContext.request.contextPath }/book/upload" method="post" enctype="multipart/form-data">
    <label>图书编号：</label><input type="text" name="bid" readonly="readonly" value="${param.bid}"/><br/>
    <label>班级图片：</label><input type="file" name="xxx"/><br/>
    <input type="submit" value="上传图片"/>
</form>
<form method="post" action="${pageContext.request.contextPath }/book/uploads" enctype="multipart/form-data">
    <input type="file" name="files" multiple>
    <button type="submit">上传</button>
</form>
</body>
</html>

2.6.文件上传实现

//    文件上传
    @RequestMapping("/upload")
public String upload(Book book,MultipartFile xxx){
        try {
//        上传图片真实存放地址
     String dir = PropertiesUtil.getValue("dir");
//网络访问地址
    String server =PropertiesUtil.getValue("server");
    String filename = xxx.getName();
    System.out.println("文件名："+filename);
    System.out.println("文件类别："+xxx.getContentType());
    FileUtils.copyInputStreamToFile(xxx.getInputStream(),new File(dir+filename));
    book.setBimage(server+filename);
    bookBiz.updateByPrimaryKeySelective(book);
        } catch (IOException e) {
        e.printStackTrace();
    }
    return "redirect:list";
}

效果展示：

3.文件下载

3.1.Controller层

//文件图片下载
@RequestMapping(value="/download")
public ResponseEntity<byte[]> download(Book book, HttpServletRequest req){
    try {
        //先根据文件id查询对应图片信息
        Book blz = this.bookBiz.selectByPrimaryKey(book.getBid());
        String diskPath = PropertiesUtil.getValue("dir");
        String reqPath = PropertiesUtil.getValue("server");
        String realPath = blz.getBimage().replace(reqPath,diskPath);
        String fileName = realPath.substring(realPath.lastIndexOf("/")+1);
        //下载关键代码
        File file=new File(realPath);
        HttpHeaders headers = new HttpHeaders();//http头信息
        String downloadFileName = new String(fileName.getBytes("UTF-8"),"iso-8859-1");//设置编码
        headers.setContentDispositionFormData("attachment", downloadFileName);
        headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);
        //MediaType:互联网媒介类型  contentType：具体请求中的媒体类型信息
        return new ResponseEntity<byte[]>(FileUtils.readFileToByteArray(file),headers, HttpStatus.OK);
    }catch (Exception e){
        e.printStackTrace();
    }
    return null;
}

3.2.前端代码

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib uri="http://jsp.veryedu.cn" prefix="z"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link
            href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.css"
            rel="stylesheet">
    <script
            src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.js"></script>
    <title>书籍后来管理系统</title>
    <style type="text/css">
        .page-item input {
            padding: 0;
            width: 40px;
            height: 100%;
            text-align: center;
            margin: 0 6px;
        }
        .page-item input, .page-item b {
            line-height: 38px;
            float: left;
            font-weight: 400;
        }
        .page-item.go-input {
            margin: 0 10px;
        }
    </style>
</head>
<body>
<form class="form-inline"
      action="${pageContext.request.contextPath }/book/list" method="post">
    <div class="form-group mb-2">
        <input type="text" class="form-control-plaintext" name="bname"
               placeholder="请输入书籍名称">
        <!--      <input name="rows" value="20" type="hidden"> -->
        <!-- 不想分页 -->
        <input name="pagination" value="false" type="hidden">
    </div>
    <button type="submit" class="btn btn-primary mb-2">查询</button>
    <a class="btn btn-primary mb-2" href="${pageContext.request.contextPath }/book/preSave">新增</a>
</form>
<table class="table table-striped">
    <thead>
    <tr>
        <th scope="col">书籍编号</th>
        <th scope="col">书籍名称</th>
        <th scope="col">书籍图片</th>
        <th scope="col">书籍价格</th>
        <th scope="col">操作</th>
    </tr>
    </thead>
    <tbody>
    <c:forEach  var="b" items="${list }">
        <tr>
            <td>${b.bid }</td>
            <td>${b.bname }</td>
            <td>
                <img src="${b.bimage }" style="height: 100px;width: 60px" >
            </td>
            <td>${b.price }</td>
            <td>
                <a href="${pageContext.request.contextPath }/book/preSave?bid=${b.bid}">修改</a>
                <a href="${pageContext.request.contextPath }/book/del?bid=${b.bid}">删除</a>
                <a href="${pageContext.request.contextPath }/page/book/upload?bid=${b.bid}">上传图片</a>
                <a href="${pageContext.request.contextPath }/book/download?bid=${b.bid}">下载图片</a>
            </td>
        </tr>
    </c:forEach>
    </tbody>
</table>
<!-- 这一行代码就相当于前面分页需求前端的几十行了 -->
<z:page pageBean="${pageBean }"></z:page>
</body>
</html>

效果展示：

4.多文件上传

4.1.Controller层

//多文件上传
    @RequestMapping("/uploads")
    public String uploads(HttpServletRequest req, Book book, MultipartFile[] files){
        try {
            StringBuffer sb = new StringBuffer();
            for (MultipartFile cfile : files) {
                //思路：
                //1) 将上传图片保存到服务器中的指定位置
                String dir = PropertiesUtil.getValue("dir");
                String server = PropertiesUtil.getValue("server");
                String filename = cfile.getOriginalFilename();
                FileUtils.copyInputStreamToFile(cfile.getInputStream(),new File(dir+filename));
                sb.append(filename).append(",");
            }
            System.out.println(sb.toString());
        } catch (Exception e) {
            e.printStackTrace();
        }
        return "redirect:list";
    }

4.2.前端代码

upload.jsp

<%--
  Created by IntelliJ IDEA.
  User: 86177
  Date: 2023/9/9
  Time: 14:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>书籍logo上传</title>
</head>
<body>
<form action="${pageContext.request.contextPath }/book/upload" method="post" enctype="multipart/form-data">
    <label>图书编号：</label><input type="text" name="bid" readonly="readonly" value="${param.bid}"/><br/>
    <label>班级图片：</label><input type="file" name="xxx"/><br/>
    <input type="submit" value="上传图片"/>
</form>
<form method="post" action="${pageContext.request.contextPath }/book/uploads" enctype="multipart/form-data">
    <input type="file" name="files" multiple>
    <button type="submit">上传</button>
</form>
</body>
</html>

效果展示：

5.JRebel的使用

5.1.安装JReble

以IDEA为例，在Settings里点击Plugins在Marketplace处搜索jrebel，选择第一个安装即可。

安装后重启IDEA即可。

5.2.反向代理工具

这里会使用一个反向代理工具ReverseProxy_windows_amd64，而JRebel是一个Java虚拟机插件，它们之间没有直接的关系。但是，如果您在使用JRebel时遇到了问题，可以尝试先启动ReverseProxy_windows_amd64，然后再使用JRebel。

下载地址

选择TeamURL激活

第一行输入http://127.0.0.1:8888/GUID

第二行输入电子邮箱即可。

GUID online erstellen（生成GUID链接）

5.3.离线使用

激活后一定要手动切换到离线模式进行使用，过程如图如下步骤进行操作：

File ➡Settings➡JRebel ➡Work offline ➡OK

（注意点击Work offline就会变为Work online）

今日分享就到这里结束了哦。

SpringMvc文件上传下载一条龙服务教会你

1.前言

2.文件如何上传

2.1公共文件跳转

2.2.添加依赖

2.3.配置文件上传解析器

2.4.图片路径配置Tomcat

2.5.前端代码

2.6.文件上传实现

3.文件下载

3.1.Controller层

3.2.前端代码

4.多文件上传

4.1.Controller层

4.2.前端代码

5.JRebel的使用

5.1.安装JReble

5.2.反向代理工具

5.3.离线使用

热门文章

最新文章

相关课程

相关电子书

相关实验场景