文件上传是网页常见的一个表单提交形式。实质上,文件上传是前端发送一个POST请求,后端接收即可。不过在Spring Boot中怎么实现文件上传呢?
一、上传单个文件
(1) 前端
先做一个简易的表单,代码如下:
<form enctype="multipart/form-data" method="POST" action="/upload">
<input type="text" name="imgName" />
<input type="file" name="imgFile" />
<input type="submit" value="upload" />
</form>
需要注意的是我们如果要上传文件,必须设定表单为multipart/form-data
格式,上面的<form>
标签中的enctype
属性就是设定表单数据格式的属性。
<input type="file" .....>
即指定了表单该条目为文件类型。
如果不想使用form标签中的按钮,而是自己组装数据,可以写如下函数:
/**
* 上传文件函数
* @param {*} requestURL 请求地址
* @param {*} file 文件(input对象的文件)
*/
function upload(requestURL, file) {
let form = new FormData(); //新建表单对象
form.append('img', file); //向表单对象添加文件,名字为img
fetch(requestURL, {
method: 'POST',
body: form
}).then((response) => {
return response.json();
}).then((result) => {
//请求完成后对结果的处理
console.log(result);
})
}
其中获取input
标签中的file
:
let input = document.querySelector('input'); //查询到input标签
let file = input.files[0]; //input的属性files表示选择的文件数组,如果是单文件就指定下标0
注意可以不用指定fetch
中的headers
的content-type
,发送FormData
对象可以自行适配。
(2) 后端
先在Spring Boot配置文件application.properties
中配置文件上传大小限制,因为其默认限制是1mb,所以上传文件稍大就会失败:
# 设置内置Tomcat请求大小为20MB
server.tomcat.max-http-form-post-size=20MB
# 设置请求最大大小为20MB
spring.servlet.multipart.max-request-size=20MB
# 设置文件上传最大大小为20MB
spring.servlet.multipart.max-file-size=20MB
三个选项最好是都设定一下,如果想无限制可以都填-1
。
然后在Controller类中写如下方法:
@PostMapping("/upload")
public String upload(@RequestParam("imgFile") MultipartFile file, @RequestParam("imgName") String name) throws Exception {
// 设置上传至项目文件夹下的uploadFile文件夹中,没有文件夹则创建
File dir = new File("uploadFile");
if (!dir.exists()) {
dir.mkdirs();
}
file.transferTo(new File(dir.getAbsolutePath() + File.separator + name + ".png"));
return "上传完成!文件名:" + name;
}
需要注意的是,上传过来的文件在Java中是MultipartFile
类型,@RequestParam
中的值即为我们前端表单每一项(<input>
标签)里面的name
属性值,或者是使用FormData
对象append
时对应的那个名字,要一一对应,必须相同。前端表单中的action
属性即为表单提交至的地址,对应我们Controller的@PostMapping
中的值。
MultipartFile实例通过使用方法transferTo
方法实现把上传的文件保存至指定位置。
效果:
文件也上传至了指定位置:
注意最好是使用@RequestParam
逐个接受参数,因为@RequestBody
不支持multipart
类型,参数多了可以分接口接收。
二、上传多个文件
上传多个文件其实也很简单,和上面上传单个文件差别不大。在前端的<input type="file"...>
这一条表示文件的条目标签中加入属性multiple即可,我的代码如下:
<form enctype="multipart/form-data" method="POST" action="/upload">
<input type="text" name="imgColName" />
<input type="file" name="imgFile" multiple />
<input type="submit" value="upload" />
</form>
这时,再上传文件时后端接收到的是MultipartFile数组,因此在上述的Controller方法中的对应的形参改成MultipartFile[]
类型即可,然后遍历操作,具体例子如下:
@PostMapping("/upload")
public String upload(@RequestParam("imgFile") MultipartFile[] files, @RequestParam("imgColName") String name) throws Exception {
File dir = new File("uploadFile");
if (!dir.exists()) {
dir.mkdirs();
}
for (MultipartFile file : files) {
file.transferTo(new File(dir.getAbsolutePath() + File.separator + file.getOriginalFilename()));
}
return "上传完成!图集名:" + name;
}