基于SpringBoot实现文件的上传、下载和在线预览（SpringBootDemo）

最新推荐文章于 2025-04-12 21:30:31 发布

picacho_pkq

最新推荐文章于 2025-04-12 21:30:31 发布

阅读量9.4k

点赞数 20

分类专栏： SpringBoot 文章标签： java spring intellij-idea

本文链接：https://blog.youkuaiyun.com/pikcacho_pkq/article/details/122383387

版权

SpringBoot 专栏收录该内容

32 篇文章

订阅专栏

在java领域中SpringBoot是一个非常好用的框架，可以快速地构建web项目，这里记录一下使用SpringBoot来实现文件的上传、下载和在线预览功能。

1.创建数据库和数据库表

本文主要用到用户和用户所属的文件，所以这里就只需要设计用户表和文件表即可。

用户表t_user

CREATE TABLE `t_user` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(80) DEFAULT NULL,
  `password` varchar(80) DEFAULT NULL,
  PRIMARY KEY (`id`) USING BTREE
) ENGINE=InnoDB DEFAULT CHARSET=utf8 ROW_FORMAT=DYNAMIC

insert into t_user(username, password) values("pikacho", "123456");

文件表t_files

CREATE TABLE `t_files` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `file_name` varchar(200) DEFAULT NULL,
  `ext` varchar(20) DEFAULT NULL,
  `path` varchar(300) DEFAULT NULL,
  `size` bigint(64) DEFAULT NULL,
  `type` varchar(120) DEFAULT NULL,
  `download_counts` int(6) DEFAULT NULL,
  `upload_time` datetime DEFAULT NULL,
  `user_id` int(11) NOT NULL,
  PRIMARY KEY (`id`),
  KEY `user_id` (`user_id`),
  CONSTRAINT `t_files_ibfk_1` FOREIGN KEY (`user_id`) REFERENCES `t_user` (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8

2.创建SpringBoot项目

这里不用多说，使用IDEA创建SpringBoot项目，删除多余没用的文件，让项目结构保持简洁。

简单地创建一个控制器，然后启动项目，测试该SpringBoot项目是否构建成功。

@Controller
public class HelloController {

    @RequestMapping("hello")
    @ResponseBody
    public String hello(){
        return "hello SpringBoot";
    }
}

访问项目：http://localhost:8080/hello，出现如下画面说明项目能够成功运行；先保证项目能成功运行，然后再考虑开发功能。

3.添加该项目需要的依赖以及配置基本环境

pom.xml依赖

       <dependencies>
        <!-- thymeleaf模板引擎的依赖-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

        <!-- SpringBoot的web项目依赖-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <!-- lombok依赖，作用是创建实体类时不用自己手动添加构造器，setter等方法-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>

        <!--mybatis依赖-->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.2.0</version>
        </dependency>

        <!--数据库连接-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>

        <!--shiro-->
        <dependency>
            <groupId>org.apache.shiro</groupId>
            <artifactId>shiro-spring</artifactId>
            <version>1.4.1</version>
        </dependency>

        <!-- 文件上传依赖-->
        <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.4</version>
        </dependency>

         <!-- druid数据库连接池依赖-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.1.19</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

application.yml主配置文件

spring:
  application:
    name: fileStorage
  thymeleaf:
    cache: false
  datasource:
    type: com.alibaba.druid.pool.DruidDataSource
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/fileservice?serverTimezone=Asia/Shanghai&userUnicode=true&characterEncoding=utf-8
    username: root
    password: root

  server:
    port: 8080


  mybatis:
    mapper-locations: classpath:mybatis/mapper/*.xml
    type-aliases-package: com.pikacho.entity

添加完依赖以及将主配置文件配置完成，完成本项目功能需要的基本环境就已经全部搭建完成了，启动项目测试项目是否可以正常运行；出现下面的画面说明项目基本环境搭建成功。

4.用户登录、注销及注册功能

4.1.完成登录功能

即使一个非常简单的demo项目，也是少不了前端页面。对于一个后端开发者来说，要自己去写前端页面布局和样式是一件挺痛苦也困难的事（是真的不会写啊！）。所以这里使用layui框架来快速构建前端页面。当然，这只是简单的使用一下该框架，想要熟练使用。还需继续深入学习才行。

1.引入layui

将layui需要的文件添加到static文件夹下

2.创建登录页面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>login</title>
    <link rel="stylesheet" th:href="@{/css/layui.css}">
</head>
<body>

<div class="layui-container">
    <div class="layui-row" style="margin-top: 80px;">
        <div class="layui-col-lg4 layui-col-lg-offset4">
            <h1 style="margin:20px; text-align: center"> 请 登 录 </h1>
            <form class="layui-form" th:action="@{/user/login}" , method="post">
                <div class="layui-form-item">
                    <p style="color: red; text-align: center" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-block">
                        <input class="layui-input" type="text" name="username" required autocomplete="false">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">密  码</label>
                    <div class="layui-input-block">
                        <input class="layui-input" type="password" name="password" required autocomplete="false">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="formDemo">立即登录</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
            <div style="float:right">
                <a th:href="@{/user/toRegister}">去注册</a>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/layui.js}"></script>
<script>
    //一般直接写在一个js文件中
    layui.use(['layer', 'form'], function(){
        var layer = layui.layer
            ,form = layui.form;
    });
</script>
</body>
</html>

UserController.java

    /**
     * 前往登录页面
     * @return
     */
    @RequestMapping("toLogin")
    public String toLogin(){
        return "login";
    }

这样，之后我们就可以轻松地创建前端页面了，并且不用自己去设计样式和布局等问题。还是要提一下，像这样简单使用一下这种程度就够了，但是要熟练使用的话，就要更加深入学习才行。

3.完成登录功能

创建User实体类--User.java

@Data
@NoArgsConstructor
@AllArgsConstructor
@ToString
public class User {
    
    private Integer id;
    private String username;
    private String password;
}

创建UserDao及其mapper映射文件--UserDao.java & UserDaoMapper.xml


@Mapper
@Repository
public interface UserDao {

    /**
     * 用户登录功能
     * @return
     */
    public User login(User user);


}

<?xml version = '1.0' encoding = 'UTF-8' ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.pikacho.dao.UserDao">
    <!-- public User login(User user)-->
    <select id="login" parameterType="User" resultType="User">
        select id, username, password
        from t_user
        where username = #{username} and password = #{password};
    </select>

创建UserService类及其实现类--UserService.java & UserServiceImpl.java


public interface UserService {
    public User login(User user);
}

@Service
public class UserServiceImpl implements UserService {

    @Autowired
    public UserDao userDao;

    @Override
    public User login(User user){
        return userDao.login(user);
    }
}

利用Shiro框架实现登录认证功能

Shiro框架可以快速实现登录认证等安全权限功能，这里也是简单使用一下，想要深入理解使用还需查阅其官方文档。

UserRealm.java

public class UserRealm extends AuthorizingRealm {

    @Autowired
    private UserService userService;


    // 授权
    @Override
    protected AuthorizationInfo doGetAuthorizationInfo(PrincipalCollection principalCollection){
        return null;
    }

    // 认证
    @Override
    protected AuthenticationInfo doGetAuthenticationInfo(AuthenticationToken token) {
        UsernamePasswordToken usernamePasswordToken = (UsernamePasswordToken)token;

        User user = new User();
        user.setUsername(usernamePasswordToken.getUsername());
        user.setPassword(String.valueOf(usernamePasswordToken.getPassword()));
        // 从数据库查询出来
        User userDB = userService.login(user);
        if(userDB == null){
            return null;
        }

        return new SimpleAuthenticationInfo(userDB, user.getPassword(), "");

    }
}

ShiroConfig.java

@Configuration
public class ShiroConfig {

    // 第一步：创建UserRealm对象
    @Bean
    public UserRealm userRealm(){
        return new UserRealm();
    }

    // 第二步：创建默认安全管理器DefaultWebSecurityManager
    @Bean(name = "securityManager")
    public DefaultWebSecurityManager getDefaultWebSecurityManager(
            @Qualifier("userRealm") UserRealm userRealm ){
        DefaultWebSecurityManager securityManager = new DefaultWebSecurityManager();
        securityManager.setRealm(userRealm);
        return securityManager;
    }

    // 第三步：创建ShiroFilterFactoryBean
    @Bean
    public ShiroFilterFactoryBean getShiroFilterFactoryBean(
            @Qualifier("securityManager") DefaultWebSecurityManager securityManager){
        ShiroFilterFactoryBean bean = new ShiroFilterFactoryBean();
        // 设置安全管理器
        bean.setSecurityManager(securityManager);
        /*
        *   anon: 无需认证就能访问
            authc: 必须认证后才能访问
            user: 必须拥有 记住我 功能才能用
            perms: 拥有对某个资源的权限才能访问
            role: 拥有某个角色权限才能访问
         */

        // 拦截/file/* ,该路径只有登录的情况下才能查看
        Map<String, String> filterMap = new LinkedHashMap<>();
        filterMap.put("/file/*", "authc");
        bean.setFilterChainDefinitionMap(filterMap);

        // 设置没有访问权限时，跳转页面
        bean.setLoginUrl("/login");
        return bean;
    }
}

在UserController类中添加登录方法

    @PostMapping("login")
    public String login(User user, Model model){
        Subject subject = SecurityUtils.getSubject();
        // 封装用户信息
        UsernamePasswordToken token = new UsernamePasswordToken(user.getUsername(), user.getPassword());
        try{
            subject.login(token);
            Session session = subject.getSession();
            session.setAttribute("user", (User)subject.getPrincipal());
            // 前往文件列表页面
            return "list";
        }catch (UnknownAccountException e){
            model.addAttribute("msg", "用户名或密码错误");
            return "login";
        }catch (IncorrectCredentialsException e){
            model.addAttribute("msg", "用户名或密码错误");
            return "login";
        }
    }

最后在SpringbootFileuploadApplication类上添加包扫描注解，不然mybatis无法将接口和xml配置文件绑定起来

@SpringBootApplication
@MapperScan(basePackages = "com.pikacho.dao")
public class SpringbootFileuploadApplication {

    public static void main(String[] args) {
        SpringApplication.run(SpringbootFileuploadApplication.class, args);
    }

}

登录功能代码已经开发完毕了，现在测试一下功能是否正常。

访问项目：http://localhost:8080/user/toLogin，之前创建用户表时，就已经创建了一个用户。用户名：pikacho 密码：123456。

4.2.完成注册功能

1.创建注册页面

<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>register</title>
    <link rel="stylesheet" th:href="@{/css/layui.css}">

</head>
<body>
<div class="layui-container">
    <div class="layui-row" style="margin-top: 80px;">
        <div class="layui-col-lg4 layui-col-lg-offset4">
            <h1 style="margin:20px; text-align: center"> 请 注 册 </h1>
            <div class="layui-form-item">
                <p style="color: red; text-align: center" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p>
            </div>
            <form class="layui-form" th:action="@{/user/register}" method="post">
                <div class="layui-form-item">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-block">
                        <input  class="layui-input" type="text" name="username" required>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">密  码</label>
                    <div class="layui-input-block">
                        <input class="layui-input" type="password" name="password" required autocomplete="false">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="formDemo">立即注册</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
            <div style="float:right">
                <a th:href="@{/user/toLogin}">去登录</a>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/layui.js}"></script>
<script>
    //一般直接写在一个js文件中
    layui.use(['layer', 'form'], function(){
        var layer = layui.layer
            ,form = layui.form;
    });

</script>



</body>
</html>

2.完成注册功能

在UserDao类中添加register()，编写mapper映射文件

    /**
     *
     * @param user
     */
    public void register(User user);

    <!-- 注册-->
    <insert id="register" parameterType="User">
        insert into t_user (username, password)
        values(#{username}, #{password});
    </insert>

在UserService类及实现类中添加注册方法

    /**
     *
     * @param user
     */
    public void register(User user);

    /**
     *
     * @param user
     */
    @Override
    public void register(User user){
        userDao.register(user);
    }

在UserController类中添加注册逻辑

测试注册功能，访问项目：http://localhost:8080/user/toRegister ；添加用户pikacho2 ：123456

4.3.创建list页面

前面只是简单的创建一个list页面验证登录功能，现在补全list页面。

list.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>FileList</title>
    <link rel="stylesheet" th:href="@{/css/layui.css}">
</head>

<body>
<div class="layui-fluid">
    <nav class="layui-nav">
        <div class="layui-nav-item">
            <p class="layui-nav-title" style="font-size: larger">
                欢迎：<span th:if="${session.user!=null}" th:text="${session.user.username}"/>
            </p>
        </div>
        <div class="layui-nav-item" style="float: right;">
            <button class="layui-btn">
                <a th:href="@{/user/logout}" style="font-size: larger; padding: 0px; color: white">login out</a>
            </button>
        </div>
        <div class="layui-nav-item" style="float: right; padding-right: 20px">
            <button type="button" class="layui-btn" id="fileUpload">
                上传文件
            </button>
        </div>
    </nav>

    <!-- 文件列表-->
    <table id="fileList" lay-filter="fileTable"></table>

    <script type="text/html" id="optBar">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="download">下载</a>
        <a class="layui-btn layui-btn-xs" lay-event="preview">预览</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
    </script>

</div>
<script th:src="@{/layui.js}" charset="utf-8"></script>

</body>
</html>

4.4.完成注销功能

在UserController类中添加注销方法

    /**
     * 注册功能
     * @return
     */
    @GetMapping("logout")
    public String logout(){
        Subject subject = SecurityUtils.getSubject();
        subject.logout();
        // 这里需要注意：redirect:user/toLogin 实际的请求路径http://localhost:8080/user/user/toLogin
        // 所以需要使用redirect:toLogin
        return "redirect:toLogin"; 
    }

5.文件的展示、上传、删除、下载功能

5.1.文件的展示

创建文件实例类--UserFile.java

@Data
@NoArgsConstructor
@AllArgsConstructor
@ToString
@Accessors(chain = true)
public class UserFile {
    private Integer id;
    private String fileName;
    private String ext;
    private String path;
    private long size;
    private String type;
    private Integer downloadCounts;
    private Date uploadTime;
    private Integer userId;
}

创建UserFileDao及其mapper映射文件

@Mapper
@Repository
public interface UserFileDao {

    /**
     * 根据用户id获得用户文件列表
     * @param id
     * @param begin
     * @param offset
     * @return
     */
    public List<UserFile> queryByUserId(Integer id, Integer begin, int offset);


    /**
     * 根据用户id获得该用户文件总数
     * @param id
     * @return
     */
    public int queryFileCount(Integer id);
}

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.pikacho.dao.UserFileDao">
    <resultMap id="UserFileMap" type="UserFile">
        <!-- 只需要映射列名和属性名不一致的-->
        <id column="id" property="id"></id>
        <result column="file_name" property="fileName"></result>
        <result column="download_counts" property="downloadCounts"></result>
        <result column="upload_time" property="uploadTime"></result>
        <result column="user_id" property="userId"></result>
    </resultMap>

    <!-- 根据用户id查询文件列表-->
    <select id="queryByUserId" parameterType="Integer" resultMap="UserFileMap">
        select * from t_files
        where user_id = #{id}
        order by id
        limit #{begin}, #{offset};
    </select>
     <!-- 根据用户id查询文件数量-->
    <select id="queryFileCount" parameterType="Integer" resultType="Integer">
        select count(*) from t_files
        where user_id = #{id};
    </select>
</mapper>

创建UserFileService类及其实现类

public interface UserFileService {

    /**
     * 根据用户id获得文件列表
     * @param id
     * @param page
     * @param limit
     * @return
     */
    public List<UserFile> queryByUserId(Integer id, Integer page, Integer limit);

    /**
     * 根据用户id获得文件数
     * @param id
     * @return
     */
    public int queryFileCounts(Integer id);
}

@Service
public class UserFileServiceImpl implements UserFileService {
    @Autowired
    private UserFileDao userFileDao;

    /**
     * 根据用户id获得文件列表
     * @param id
     * @param page
     * @param limit
     * @return
     */
    @Override
    public List<UserFile> queryByUserId(Integer id, Integer page, Integer limit){
        // page表示第几页，limit表示每页显示多少行数据
        int begin = (page-1)*limit;   // 该计算方法获得开始的位置
        int offset = limit;
        return userFileDao.queryByUserId(id, begin, limit);
    }

    /**
     * 根据用户id获得文件数
     * @param id
     * @return
     */
    @Override
    public int queryFileCounts(Integer id){
        return userFileDao.queryFileCounts(id);
    }
}

创建UserFileController类

@Controller
@RequestMapping("file")
public class UserFileController {
    @Autowired
    private UserFileService userFileService;

    /**
     * 返回文件列表
     * @param session
     * @param request
     * @return
     */
    @PostMapping("all")
    @ResponseBody
    public Map<String, Object> queryAllFile(HttpSession session, HttpServletRequest request){
        int page = Integer.parseInt(request.getParameter("page"));
        int limit = Integer.parseInt(request.getParameter("limit"));
        User user = (User) session.getAttribute("user");
        List<UserFile> files = userFileService.queryByUserId(user.getId(), page, limit);

        Map<String, Object> res = new HashMap<>();
        res.put("code", 0);
        res.put("count", userFileService.queryFileCounts(user.getId()));
        res.put("data", files);
        return res;
    }

}

接着在list.html中添加渲染表格的脚本

        // 渲染表格
        table.render({
            elem: '#fileList',
            height: 600,
            minWidth: 80,
            url: '/file/all',    // 这一定要是/file/all，之前我是file/all不停的报错，无法访问成功
            parseData: function (res) {
                            return {
                                "code": res.code,
                                "msg": "",
                                "count": res.count,
                                "data": res.data
                            };
            },
            method: 'post',
            limit: 10,
            page: true,
            cols: [[
                {field:'id', title:'ID', sort:true, fixed:'left'},
                {field:'fileName', title:'文件名'},
                {field:'ext', title:'文件后缀'},
                {field:'path', title:"存储路径"},
                {field:'size', title:'大小'},
                {field:'type', title:"类型"},
                {field:'downloadCounts', title:'下载次数'},
                {field:'uploadTime', title:'上传时间'},
                {tilte:'操作',align:'center', toolbar:'optBar', width:200, fixed:'right'}
            ]]
        });

5.2.文件上传

在UserFileDao类中添加上传文件方法及mapper映射文件

    /**
     * 上传文件
     * @param userFile
     */
    public void save(UserFile userFile);

    <!-- 上传文件-->
    <insert id="save" parameterType="UserFile" useGeneratedKeys="true" keyProperty="id">
        insert into t_files(file_name, ext, path, size, type, download_counts, upload_time, user_id)
        values(#{fileName}, #{ext}, #{path}, #{size}, #{type}, #{downloadCounts}, #{uploadTime}, #{userId});
    </insert>

在UserFileService类及UserFileServiceImpl类中添加方法

    /**
     * 上传文件
     * @param userFile
     */
    public void save(UserFile userFile);



    /**
     * 上传文件
     * @param userFile
     */
    @Override
    public void save(UserFile userFile){
        userFile.setDownloadCounts(0).setUploadTime(new Date());
        userFileDao.save(userFile);
    }

在UserFileController类中添加上传文件接口

    @GetMapping("index")
    public String fileIndex(){
        return "list";
    }


    /**
     * 上传文件
     * @param file
     * @param session
     * @return
     */
    @PostMapping("upload")
    @ResponseBody
    public Map<String, String> uploadFile(@RequestParam("file")MultipartFile file, HttpSession session){
        Map<String, String> res = new HashMap<>();
        try{
            User user = (User) session.getAttribute("user");
            String fileName = file.getOriginalFilename();
            String extension = FilenameUtils.getExtension(fileName);
            long size = file.getSize();
            String type = file.getContentType();
            // 根据日期生成目录
            String localContainer = "/fileContainer";
            String uploadPath = ResourceUtils.getURL("classpath").getPath()+localContainer;
            String dateFormat = new SimpleDateFormat("yyyy-MM-dd").format(new Date());
            File dateDirPath = new File(uploadPath+File.separator+dateFormat);
            if(!dateDirPath.exists()){
                dateDirPath.mkdirs();
            }

            file.transferTo(new File(dateDirPath, fileName));
            // 将文件信息存入数据库
            UserFile userFile = new UserFile();
            userFile.setFileName(fileName)
                    .setExt('.'+extension)
                    .setPath(Paths.get(localContainer, dateFormat, fileName).toString())
                    .setSize(size)
                    .setType(type)
                    .setUserId(user.getId());

            userFileService.save(userFile);

            res.put("code", "0");
            res.put("msg", "上传成功");
            res.put("url", "/file/index");

        }catch(IOException e){
            res.put("code", "-1");
            res.put("msg", "上传失败");
            res.put("url", "/file/index");
        }
        return res;
    }

这里文件存储在我的本地磁盘上，文件表中存储的是文件在我磁盘存储的存储路径。

5.3.文件下载

开发流程与上面基本一致。

 // UserFiledao
   /**
     * 下载文件
     * @param id
     * @return
     */
    public UserFile queryByUserFileId(Integer id);

    /**
     * 更新文件下载次数
     * @param userFile
     */
    public void update(UserFile userFile);


// UserFileService
    /**
     * 下载文件
     * @param id
     * @return
     */
    public UserFile queryByUserFileId(Integer id);

    /**
     * 跟新文件下载次数
     * @param userFile
     */
    public void update(UserFile userFile);

// UserFileServiceImpl
    /**
     * 下载文件
     * @param id
     * @return
     */
    @Override
    public UserFile queryByUserFileId(Integer id) {
        return userFileDao.queryByUserFileId(id);
    }

    /**
     * 跟新文件下载次数
     * @param userFile
     */
    @Override
    public void update(UserFile userFile) {
        userFileDao.update(userFile);
    }

    <!-- 下载文件-->
    <select id="queryByUserFileId" parameterType="Integer" resultMap="UserFileMap">
        select * from t_files where id = #{id};
    </select>
    <!-- 更新文件下载次数-->
    <update id="update" parameterType="UserFile">
        update t_files set download_counts = #{downloadCounts} where id = #{id};
    </update>

    /**
     * 下载文件
     * @param id
     * @param response
     */
    @GetMapping("download/{id}")
    public void download(@PathVariable("id") Integer id, HttpServletResponse response){
        String openStyle = "attachment";
        try{
            getFile(openStyle, id, response);
        }catch (Exception e){
            e.printStackTrace();
        }
    }

    /**
     * 更新文件下载次数
     * @param openStyle
     * @param id
     * @param response
     * @throws Exception
     */
    public void getFile(String openStyle, Integer id, HttpServletResponse response) throws Exception {
        UserFile userFile = userFileService.queryByUserFileId(id);
        String realPath = ResourceUtils.getURL("classpath").getPath()+userFile.getPath();

        FileInputStream is = new FileInputStream(new File(realPath));
        // 附件下载
        response.setHeader("content-disposition", openStyle+";filename=" + URLEncoder.encode(userFile.getFileName(), "UTF-8"));
        // 获取响应response输出流
        ServletOutputStream os = response.getOutputStream();
        // 文件拷贝
        IOUtils.copy(is, os);
        IOUtils.closeQuietly(is);
        IOUtils.closeQuietly(os);

        if(openStyle.equals("attachment")){
            userFile.setDownloadCounts(userFile.getDownloadCounts()+1);
            userFileService.update(userFile);
        }
    }

list.html

        //监听工具条
        table.on('tool(fileTable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'download') {
                window.open("/file/download/" + data.id);
                obj.update({
                    "downloadCounts": data.downloadCounts + 1
                });
            } else if (obj.event === 'delete') {
                layer.confirm('真的删除文件吗？', function (index) {
                    $.ajax({
                        url: "/file/delete/" + data.id,
                        type: "Get",
                        success: function (res) {
                            layer.msg(res.msg);
                            obj.del();
                        },
                        error: function (res) {
                            $.message.alert('msg', res.msg);
                        }
                    });
                    layer.close(index);
                });
            } else if (obj.event === 'preview') {
                
                layer.open({
                    type: 2,
                    skin: 'layui-layer-demo', //样式类名
                    title: '文件预览',
                    closeBtn: 1, //显示关闭按钮
                    anim: 2,
                    area: ['893px', '600px'],
                    shadeClose: true, //开启遮罩关闭
                    content: '/file/preview/' + data.id
                });
            }
        });

5.4.文件删除

文件删除开发流程也是同上。

6.完成文件预览功能

添加预览方法

    /**
     * 文件预览
     * @param id
     * @param response
     * @throws IOException
     */
    @GetMapping("preview/{id}")
    public void preview(@PathVariable("id") Integer id, HttpServletResponse response) throws Exception {
        String openStyle = "inline";
        getFile(openStyle,id,response);
    }