一、单个文件上传
1、创建工程,引入依赖
<dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> </dependencies>
2、编写controller
**
* @Author ChoiBin
* @Date 2019-07-29 14:01
* @Version 1.0
*/
@RestController
public class FileUploadController {
//创建一个时间格式,方便图片分类
SimpleDateFormat simpleDateFormat = new SimpleDateFormat("/yyyy/MM/dd/");
@PostMapping("/upload")
public String upload(MultipartFile file, HttpServletRequest request){
String format = simpleDateFormat.format(new Date());
String realPath = request.getServletContext().getRealPath("/img") + format;
File folder = new File(realPath);
if(!folder.exists()){
folder.mkdirs();
}
String oldName = file.getOriginalFilename();
String newName = UUID.randomUUID().toString() + oldName.substring(oldName.lastIndexOf("."));
try {
file.transferTo(new File(folder,newName));
String url = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + "/img" + format + newName;
return url;
}catch (IOException e){
e.printStackTrace();
}
return "error";
}
} 3、编写HTML代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="/upload" method="post" enctype="multipart/form-data"> <input type="file" name="file"> <input type="submit" value="提交"> </form> </body> </html>
4、测试结果
5、如何修改上传的文件大小
application.properties配置文件添加:
# 上传文件总的最大值
spring.servlet.multipart.max-request-size=10MB
# 单个文件的最大值
spring.servlet.multipart.max-file-size=10MB 二、用Ajax上传文件
1、修改HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="result"></div>
<input type="file" name="file">
<input type="button" value="上传" onclick="uploadFile()">
<script>
function uploadFile() {
var file = $("#file")[0].files[0];
var formData = new FormData();
formData.append("file",file);
$.ajax({
type:"post",
url:"/upload",
processData:false,
contenType:false,
data:formData,
success:function (msg) {
$("result").html(msg);
}
})
}
</script>
</body>
</html> 后端代码保持不变,只需更改前端代码
三、多个文件上传
1、编写HTML代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="/uploads" method="post" enctype="multipart/form-data"> <input type="file" name="files" multiple> <input type="submit" value="提交"> </form> </body> </html>
2、编写controller
@PostMapping("/uploads")
public String uploads(MultipartFile[] files, HttpServletRequest request){
String format = simpleDateFormat.format(new Date());
String realPath = request.getServletContext().getRealPath("/img") + format;
File folder = new File(realPath);
if(!folder.exists()){
folder.mkdirs();
}
for (MultipartFile file : files) {
String oldName = file.getOriginalFilename();
String newName = UUID.randomUUID().toString() + oldName.substring(oldName.lastIndexOf("."));
try {
file.transferTo(new File(folder,newName));
String url = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + "/img" + format + newName;
System.out.println(url);
}catch (IOException e){
e.printStackTrace();
}
}
return "success";
} 如果需要实现多个文件上传,那么controller就用一个MultipartFile数组来接收前台传进来的文件;如果是在多个<input>标签上的图片文件,那么controller上就写多个MultipartFile,与<input>标签上的name对应即可。

京公网安备 11010502036488号