1、简介
- 文件上传,是指将本地图片、视频、音频、等文件上传到服务器,供其他用户浏览下载的过程
- 文件上传在项目中应用非常广泛,我们经常发微博、发微信朋友圈都用到了文件上传功能
2、如何进行图片传输
前端页面三要素:
-
表单项 type = “file”: 在 HTML 表单中,确保你的文件上传字段使用了
input
标签,且type
属性设置为"file"
。这样用户就可以通过点击按钮或者拖拽文件的方式选择要上传的图片文件。htmlCopy code<form action="/upload" method="post" enctype="multipart/form-data"> <input type="file" name="imageFile"> <!-- 其他表单项 --> <button type="submit">上传</button> </form>
-
表单提交方式 post: 确保你的表单提交方式为 POST 方法,因为文件上传通常需要发送大量数据,POST 方法更适合这种情况。
-
表单的 enctype 属性 multipart/form-data: 当表单中包含文件上传时,确保你设置了
enctype
属性为"multipart/form-data"
,这样表单数据将以多部分形式进行编码,包括文件数据。
服务端接收文件:
- 使用
request.getInputStream()
解析文件数据: 在 Spring MVC 中,可以通过HttpServletRequest
对象的getInputStream()
方法获取请求的输入流,从而获取上传的文件数据。 - 封装数据给
MultipartFile
: Spring 框架提供了MultipartFile
接口用于表示上传的文件。你可以将从request.getInputStream()
获取的文件数据封装成MultipartFile
对象,以便在 Spring MVC 中更方便地处理文件上传。 - 通过
MultipartFile
对象操作文件: 一旦文件被封装成MultipartFile
对象,你就可以通过这个对象获取文件的内容、文件名、大小、内容类型等信息。此外,你还可以使用MultipartFile
对象提供的方法将文件保存到服务器的任意位置。
整体流程就是,前端页面通过表单上传图片文件,服务端接收到请求后解析文件数据并保存或处理文件。
3、本地存储文件上传
当客户端发送 POST 请求到 /admin/common/upload
接口时,服务端会接收到上传的文件,并将其存储在本地服务器磁盘的指定目录中。
具体流程如下:
- 首先,服务端通过
@PostMapping("/upload")
注解将/admin/common/upload
接口映射到了upload()
方法。 - 在
upload()
方法中,通过方法参数MultipartFile file
接收客户端上传的文件数据。 - 生成一个唯一的文件名,确保文件名的唯一性。这里使用了原始文件名的后缀作为新文件名的后缀,并且在文件名前面添加了 UUID 以确保唯一性。
- 使用
transferTo()
方法将文件保存到本地服务器磁盘的指定目录中。这里直接使用了硬编码的路径"d:\\file\\img\\"
,你也可以根据自己的需求进行配置。 - 最后,返回一个成功的结果给客户端,通知文件上传成功。
@RestController
@RequestMapping("/admin/common")
@Slf4j
public class CommonController {
@PostMapping("/upload")
public Result upload(MultipartFile file) throws IOException {
//获取上传文件存储到D:\file\img目录下,并文件名使用uuid生成
//1、生成唯一文件名
//获取原始文件名
String originalFilename = file.getOriginalFilename();
String extName = originalFilename.substring(originalFilename.lastIndexOf("."));
//定义唯一文件名
String fileName = UUID.randomUUID() + extName;
//2、保存到磁盘上
file.transferTo(new File("d:\\file\\img\\"+fileName));
//3、返回成功
return Result.success();
}
}
**注意:**在SpringBoot,文件上传,默认单个文件允许最大大小为1m,如果需要上传大文件,可以进行如下配置
servlet:
multipart:
max-file-size: 10MB #一次请求上传单个文件限制
max-request-size: 100MB #一次请求上传多个文件限制