SpringBoot 优雅地实现文件的上传和下载

分手后的思念是犯贱 2023-10-10 22:50 40阅读 0赞

## 1.效果演示 ##

![format_png][]

## 2.技术栈 ##

*  maven
 *  springboot
 *  mybatis-plus
 *  mysql
 *  thymeleaf
 *  bootstrap

## 3.数据库表 ##

![a98c50d3d653caf347df8b307f517a56.png][]

CREATE TABLE `t_upload_file` (
      `id` bigint(11) NOT NULL AUTO_INCREMENT,
      `old_name` varchar(100) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL,
      `new_Name` varchar(100) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL,
      `url_path` varchar(100) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL,
      `size` varchar(100) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL,
      `file_type` varchar(100) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL,
      `created_date` datetime DEFAULT NULL,
      PRIMARY KEY (`id`)
    ) ENGINE=InnoDB AUTO_INCREMENT=40 DEFAULT CHARSET=utf8;
    复制代码

## 4.创建 springboot 项目 ##

![format_png 1][]

![bca9c0f47f081019d668e58c20435546.png][]

## 5.引入依赖 ##

这里我们主要引入以下依赖：

*  web
 *  mybatis-plus
 *  mysql 驱动
 *  thymeleaf
 *  commons-fileupload
 *  lombok

commons-fileupload 是一个上传文件的组件，该组件封装了一些上传文件的方法。

<dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    
    <dependency>
        <groupId>com.baomidou</groupId>
        <artifactId>mybatis-plus-boot-starter</artifactId>
        <version>3.4.0</version>
    </dependency>
    
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <scope>runtime</scope>
    </dependency>
    
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
    
    <dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
        <optional>true</optional>
    </dependency>
    
    <dependency>
        <groupId>commons-fileupload</groupId>
        <artifactId>commons-fileupload</artifactId>
        <version>1.4</version>
    </dependency>
    复制代码

## 6.修改配置文件 ##

这里主要包含数据源、thymeleaf、mybatis-plus 三个模块的配置。

![format_png 2][]

## 7.代码生成 ##

这里使用 mybatis-plus 的代码生成工具自动生成 controller、entity、service、mapper，极大地提高代码开发效率。

记得添加以下依赖：

<dependency>
        <groupId>com.baomidou</groupId>
        <artifactId>mybatis-plus-generator</artifactId>
        <version>3.5.1</version>
    </dependency>
    <dependency>
        <groupId>org.freemarker</groupId>
        <artifactId>freemarker</artifactId>
    </dependency>
    复制代码

输入表名然后运行该程序：

![format_png 3][]

![format_png 4][]

## 8.前端 ##

前端主要使用了 thymeleaf 和 bootstrap。Thymeleaf 是一种模板引擎技术，bootstrap 是 Twitter 推出的前端开发框架。

新建 index.html 文件，分别引入 bootstrap 的 css 和 Thymeleaf 的命名空间。

![format_png 5][]

## 9.文件列表功能 ##

后端：

查询列表数据，封装到 model 里面，然后跳转到列表页面。

![1c6ba2e556d3a45d0d88050786057039.png][]

前端：

列表页面使用 Thymeleaf 常用的标签：

![format_png 6][]

## 10.文件上传 ##

前端表单发起 post 请求，切记 enctype 格式是 multipart/form-data。

<form method="post" enctype="multipart/form-data" th:action="@{/file/upload}">
        <input type="file" name="multipartFile">
        <input type="submit" style="margin-top:20px" value="点击上传" class="btn btn-primary btn-sm"/>
    </form>
    复制代码

后端用 MultipartFile 类型的对象接收文件，然后将文件拷贝到固定格式文件夹下：

![9a92fe8b99101447cfde1230706c1d0f.png][]

/项目根路径/static/files/20xx-xx-xx/xxxx.jpg
    复制代码

其中上传文件的核心代码：

multipartFile.transferTo(new File(finalFile, newName));
    复制代码

我们发现 transferTo 方法核心还是 IO 的读写操作：

![format_png 7][]

## 11.文件下载 ##

1.先根据文件 id 查询文件信息，然后根据文件所在路径和文件名获取文件输入流。

2.设置响应头的扩展头、下载文件的名称。

3.获取文件输出流

4.关闭文件输入输出流

![format_png 8][]

## 12.删除文件 ##

1.先根据文件 id 查询文件信息，然后根据文件所在路径和文件名获取 file 对象。

2.如果 file 对象存在就删除该文件。

3.删除数据库中该文件信息。

![format_png 9][]

## 13.项目完整代码 ##

链接：https://pan.baidu.com/s/1LODyH8TcVxnKqYprPoOo7g?pwd=1234 
    提取码：1234

[format_png]: https://img-blog.csdnimg.cn/img_convert/672b8e2c9d854ced409638de0d3b289b.webp?x-oss-process=image/format,png
[a98c50d3d653caf347df8b307f517a56.png]: https://img-blog.csdnimg.cn/img_convert/a98c50d3d653caf347df8b307f517a56.png
[format_png 1]: https://img-blog.csdnimg.cn/img_convert/5f4477f5fe65cab450f21586d8f58ba9.webp?x-oss-process=image/format,png
[bca9c0f47f081019d668e58c20435546.png]: https://img-blog.csdnimg.cn/img_convert/bca9c0f47f081019d668e58c20435546.png
[format_png 2]: https://img-blog.csdnimg.cn/img_convert/a22002e4d8c971b3d4765f61f2afa32f.webp?x-oss-process=image/format,png
[format_png 3]: https://img-blog.csdnimg.cn/img_convert/f7fa8475809931e43e831dd60064eb71.webp?x-oss-process=image/format,png
[format_png 4]: https://img-blog.csdnimg.cn/img_convert/b9fb8715dc1b471eda25c7b4c9cc6b96.webp?x-oss-process=image/format,png
[format_png 5]: https://img-blog.csdnimg.cn/img_convert/5ce340e8fc06d0064ec1e16fad52af0a.webp?x-oss-process=image/format,png
[1c6ba2e556d3a45d0d88050786057039.png]: https://img-blog.csdnimg.cn/img_convert/1c6ba2e556d3a45d0d88050786057039.png
[format_png 6]: https://img-blog.csdnimg.cn/img_convert/f5d19b1a17d28c602b6e95a6e9c0142e.webp?x-oss-process=image/format,png
[9a92fe8b99101447cfde1230706c1d0f.png]: https://img-blog.csdnimg.cn/img_convert/9a92fe8b99101447cfde1230706c1d0f.png
[format_png 7]: https://img-blog.csdnimg.cn/img_convert/d96fc7d94f8f7b79158d0054dd662b93.webp?x-oss-process=image/format,png
[format_png 8]: https://img-blog.csdnimg.cn/img_convert/25176dbfb413527c7bb0529deec48351.webp?x-oss-process=image/format,png
[format_png 9]: https://img-blog.csdnimg.cn/img_convert/f7a7a017d8f22cb99d797dec9c9e0aab.webp?x-oss-process=image/format,png