文件上传可以有两种形式：
- 将图片资源上传到oos内容存储服务器，通过url访问图片资源
- 上传到项目服务器
这里采用第二种形式：Springboot MultipartFile + vue，上传资源到项目服务器中
设置上传文件大小
在Springboot项目中，默认上传文件大小为1M，若需要更大容量，需要 application.properties 手动设置
#设置上传文件大小，默认只有1 m
spring.servlet.multipart.max-file-size=100MB
spring.servlet.multipart.max-request-size=100MB
前端页面
前端需要使用input，本人使用vue的axios进行post(前端页面有多种实现方式，使用post传文件就行)
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script>
$(function () {
var data4Vue = {
uri: 'testPost',
file: null // file存放上传的文件
}
// ViewModel
var vue = new Vue({
el: '#test',
data: data4Vue,
methods: {
getFile: function(event) {
this.file = event.target.files[0]
},
add: function () {
if(!checkEmpty(this.file, "分类图片"))
return;
var url = this.uri;
//axios.js 上传文件要用 formData 这种方式
var formData = new FormData();
formData.append("image", this.file);
axios.post(url,formData).then(function(response){
vue.file = null;
});
}
}
})
})
</script>
<body>
<div id="test">
<div class="panel panel-warning addDiv">
<div class="panel-heading">新增分类</div>
<div class="panel-body">
<table class="addTable">
<tr>
<td>分类图片</td>
<td>
<input id="categoryPic" accept="image/*" type="file" name="image" @change="getFile($event)" />
</td>
</tr>
<tr class="submitTR">
<td colspan="2" align="center">
<a href="#nowhere" @click="add" class="btn btn-success">提交</a>
</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
后端服务端代码
在Controller中，使用MultipartFile接收文件，并通过👇获得项目根路径
request.getServletContext().getRealPath();
完整代码：
@PostMapping("/testPost")
public void addTest(MultipartFile image, HttpServletRequest request) throws Exception {
String filePath = request.getServletContext().getRealPath("img/test");
File fileFolder = new File(filePath);
File file = new File(fileFolder, "test");
if(!file.getParentFile().exists()){
file.getParentFile().mkdirs();
}
image.transferTo(file);
}v
- image.transferTo(file)： 将MultipartFile保存到创建的file中
- request.getServletContext().getRealPath(): 获得的项目根路径默认为 src/main/webapp中，上面代码将文件保存在了src/main/webapp/img/test中
网友评论