当前位置：首页 > news >正文

基于SpringBoot实现SpringMvc上传下载功能实现

news 2025/7/15 20:38:34

SpringMvc上传下载功能实现

1.创建新的项目

1）项目信息填写

Spring Initializr (单击选中)
Name(填写项目名字)
Language（选择开发语言）
Type（选择工具Maven）
Group（）
JDK（jdk选择17 ）
Next(下一步)

2）选择所用的包

Springboot (选择SpringBoot版本)
输入(web)
选择Spring Web
选择Thymeleaf
create

3）创建controller包

4）创建DownLoadController类

package com.xiji.springdemo01.controller;import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;@Controller
public class DownLoadController {@RequestMapping("/")public String index(){return "index";}}

5）创建UpLoadController类

package com.xiji.springdemo01.controller;import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;/*** 文件上传功能*/
@Controller
public class UpLoadController {@RequestMapping("/up")public String uploadPage(){return "upload";}
}

在resources文件的static创建img文件夹===》导入图片

打开templates文件夹

6）创建index.html

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>精美主页面</title><style>/* styles.css */body {font-family: Arial, sans-serif;margin: 0;padding: 0;background-color: #f4f4f4;}header {background-color: #333;color: white;padding: 10px 0;text-align: center;}nav ul {list-style-type: none;padding: 0;}nav ul li {display: inline;margin-right: 10px;}nav ul li a {color: white;text-decoration: none;}main {padding: 20px;background-color: white;margin: 20px;}section {margin-bottom: 20px;}footer {background-color: #333;color: white;text-align: center;padding: 10px 0;position: fixed;width: 100%;bottom: 0;}</style>
</head>
<body>
<header><nav><ul><li><a href="#home">首页</a></li><li><a href="#services">服务</a></li><li><a href="#about">关于我们</a></li><li><a href="#contact">联系我们</a></li></ul></nav>
</header>
<main><di style="width: 200px;height: 200px;"> <a th:href="@{/download}">文件下载</a></di></main>
<footer><p>版权所有 © 2023 我们的公司</p>
</footer>
</body>
</html>

注:<a th:href="@{/download}">文件下载</a> 这个路径对应的是后端的下载接口

7）创建upload.html

<!DOCTYPE html>
<html lang="zh-CN" >
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文件上传</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"><style>body {font-family: 'Arial', sans-serif;background-color: #f4f4f9;margin: 0;padding: 0;}.container {max-width: 600px;margin: 50px auto;padding: 20px;background-color: #fff;border-radius: 10px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}h1 {text-align: center;color: #333;}.form-group {margin-bottom: 20px;}.btn-primary {width: 100%;}.custom-file-input ~ .custom-file-label {background-color: #e9ecef;border-color: #ced4da;}.custom-file-input:focus ~ .custom-file-label {border-color: #80bdff;box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);}</style>
</head>
<body>
<div class="container"><h1>文件上传</h1><form id="uploadForm" method="post" action="http://127.0.0.1:8080/upload" enctype="multipart/form-data"><div class="form-group"><label for="fileInput">选择文件:</label><input type="file" class="form-control-file" id="fileInput" name="fileInput"></div><button type="submit" class="btn btn-primary">上传文件</button></form>
</div><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script></script>
</body>
</html>j

注：<input type="file" class="form-control-file" id="fileInput" name="fileInput">

name值与接口值一致

解释

form 元素创建了一个表单，其属性包括：
1. id 设置为 "uploadForm"，可以在JavaScript中引用此表单。
2. method 设置为 "post"，表示数据将通过POST方法提交到服务器。
3. action 指定了接收上传文件的服务器端脚本地址。
4. enctype 设置为 "multipart/form-data"，这是必须的，因为它允许表单发送二进制文件数据（如图片或文档）。
input 类型为 "file"，允许用户从本地文件系统选择一个或多个文件进行上传。
最后，一个带有类 "btn btn-primary" 的按钮用于提交表单。

2.实现上传功能

1）关键代码

/*** 通过MultipartFile实现上传*/
@RequestMapping("/upload")
@ResponseBody
public String upload(MultipartFile fileInput) throws IOException {PathMatchingResourcePatternResolver resolver = new PathMatchingResourcePatternResolver();//获取上传文件夹的路径资源Resource resource = resolver.getResource("classpath:static/img/"); //获取文件夹真实路径String path = resource.getFile().getPath();//路径拼接String filePath = path + File.separator + fileInput.getOriginalFilename();//通过transferTo()方法返回给前端fileInput.transferTo(new File(filePath));return "上传成功";}

2）详情解释

注解说明:
- @RequestMapping("/upload"): 定义了处理 HTTP 请求的 URL 映射。
- @ResponseBody: 表示该方法返回的内容将直接作为 HTTP 响应体返回给客户端。
接收上传文件:
- MultipartFile fileInput: 用于接收上传的文件。
获取文件夹路径:
- PathMatchingResourcePatternResolver resolver: 用于解析文件资源路径。
- resolver.getResource("classpath:static/img/"): 获取指定路径下的文件夹资源。
- String path = resource.getFile().getPath();: 获取文件夹的真实路径。
拼接文件路径:
- String filePath = path + File.separator + fileInput.getOriginalFilename();: 拼接完整的文件路径。
保存文件:
- fileInput.transferTo(new File(filePath));: 将上传的文件保存到指定路径。
返回结果:
- return "上传成功";: 返回上传成功的消息。

3）功能测试

打开 http://127.0.0.1:8080/up

http://127.0.0.1:8080/up

任选一张图片

打开idea ===> target ==> classes ===> static ==> img ==>看到已经成功上传到服务器

可以看到已经上传成功了

3.文件下载功能实现

1）关键代码

/**** 通过PathMatchingResourcePatternResolver + ResponseEntity 下载文件*/
@RequestMapping("/download")
@ResponseBody
public ResponseEntity<byte[]> download() throws IOException {//获取文件地址 PathMatchingResourcePatternResolver resolver = new PathMatchingResourcePatternResolver();Resource resource = resolver.getResource("static/img/1.png");                        // 1.png修改为你导入的图片名称//获取文件File file = resource.getFile(); //获取文件流FileInputStream fileInputStream = new FileInputStream(file);//创建每次读取的字节数为文件本身大小byte[] bytes = new byte[fileInputStream.available()];//相当于把文件流 输入到  bytes 字节数组中fileInputStream.read(bytes);//设置下载方式HttpHeaders httpHeaders = new HttpHeaders();httpHeaders.add("Content-Disposition", "attachment; filename=" + file.getName());//状态码设置HttpStatus ok = HttpStatus.OK;//创建ResponseEntity返回给前端ResponseEntity<byte[]> responseEntity = new ResponseEntity<>(bytes, httpHeaders, ok);return responseEntity;
}

2）详细解释

注解说明:
- @RequestMapping("/download"): 定义了处理 HTTP 请求的 URL 映射。
- @ResponseBody: 表示该方法返回的内容将直接作为 HTTP 响应体返回给客户端。
文件资源解析:
- PathMatchingResourcePatternResolver: 用于解析文件资源路径。
- getResource("static/img/1.png"): 获取指定路径下的文件资源。
文件对象获取:
- File file = resource.getFile();: 将资源转换为 File 对象。
设置响应头:
- HttpHeaders httpHeaders: 创建响应头对象。
- httpHeaders.add("Content-Disposition", "attachment; filename=" + file.getName()): 设置响应头，指定文件以附件形式下载，并设置文件名。
状态码设置:
- HttpStatus ok = HttpStatus.OK: 设置 HTTP 状态码为 200 OK。
读取文件内容:
- FileInputStream fileInputStream = new FileInputStream(file);: 创建文件输入流。
- byte[] bytes = new byte[fileInputStream.available()];: 创建字节数组。
- fileInputStream.read(bytes);: 读取文件内容到字节数组中。
创建响应实体:
- ResponseEntity<byte[]> responseEntity = new ResponseEntity<>(bytes, httpHeaders, ok);:
- 创建 ResponseEntity 对象，包含文件内容、响应头和状态码。
返回响应:
- return responseEntity;: 返回响应实体。

3）功能测试

打开网址打开网址打开网址 http://127.0.0.1:8080/打开网址

可以看到我们已经下载成功了

4.附:

1）完整的DownLoadController 类代码

package com.xiji.springdemo01.controller;import org.springframework.core.io.Resource;
import org.springframework.core.io.support.PathMatchingResourcePatternResolver;
import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;@Controller
public class DownLoadController {/**** 通过PathMatchingResourcePatternResolver + ResponseEntity 下载文件*/@RequestMapping("/download")@ResponseBodypublic ResponseEntity<byte[]> download() throws IOException {//获取文件地址PathMatchingResourcePatternResolver resolver = new PathMatchingResourcePatternResolver();Resource resource = resolver.getResource("static/img/1.png");//获取文件File file = resource.getFile();//获取文件流FileInputStream fileInputStream = new FileInputStream(file);//创建每次读取的字节数为文件本身大小byte[] bytes = new byte[fileInputStream.available()];//相当于把文件流 输入到  bytes 字节数组中fileInputStream.read(bytes);//设置下载方式HttpHeaders httpHeaders = new HttpHeaders();httpHeaders.add("Content-Disposition", "attachment; filename=" + file.getName());//状态码设置HttpStatus ok = HttpStatus.OK;ResponseEntity<byte[]> responseEntity = new ResponseEntity<>(bytes, httpHeaders, ok);return responseEntity;}@RequestMapping("/")public String index(){return "index";}}

2）完整的UpLoadController 代码

package com.xiji.springdemo01.controller;import org.springframework.context.support.ClassPathXmlApplicationContext;
import org.springframework.core.io.Resource;
import org.springframework.core.io.support.PathMatchingResourcePatternResolver;
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 java.io.File;
import java.io.IOException;/*** 文件上传功能*/
@Controller
public class UpLoadController {/*** 通过MultipartFile实现上传*/@RequestMapping("/upload")@ResponseBodypublic String upload(MultipartFile fileInput) throws IOException {PathMatchingResourcePatternResolver resolver = new PathMatchingResourcePatternResolver();Resource resource = resolver.getResource("classpath:static/img/");String path = resource.getFile().getPath();//路径拼接String filePath = path + File.separator + fileInput.getOriginalFilename();fileInput.transferTo(new File(filePath));return "上传成功";}@RequestMapping("/up")public String uploadPage(){return "upload";}
}

查看全文

http://www.lryc.cn/news/437486.html