SpringBoot 2.0提供了很多开箱即用的功能,这使得我们开发也更加的简单。
下面是一个图片上传的Demo(包含前端代码与后端的代码)
Web端代码,支持批量上传
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>File upload</title>
<script src="../static/js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="uploadForm">
<input id="file" type="file" multiple/>
<button id="upload" type="button" onclick="getUpload()">upload</button>
</div>
<script type="text/javascript">
var length;
$("#file").change(function () {
length = this.files.length;
console.log(length);
})
function getUpload(){
var formData = new FormData();
var arr=new Array();
var container;
var i=0;
for(let i=0;i<length;i++){
formData.append('file', $('#file')[0].files[i]);
console.log(formData.get("file"));
}
container=formData.getAll("file");
for (var item in container) {
arr[i] = container[item];
i++;
}
console.log(arr);
$.ajax({
url: '/pic',
type: 'POST',
dataType:"json",
cache: false,
data: formData,
processData: false,
contentType: false,
success:(function(data) {
window.confirm(data.code)
}),
error:(function(res) {
alert("失败");
})
});
}
</script>
</body>
</html>
Controller 层参数接收
@RequestMapping("/pic")
@ResponseBody
public BaseResponse uplodFile(@RequestParam("file") MultipartFile[] file) throws Exception {
/*String originalFilename = file.getOriginalFilename();
FileInputStream inputStream = (FileInputStream) file.getInputStream();*/
/* System.out.println(inputStream);
System.out.println(originalFilename);*/
System.out.println("数组的长度"+file.length);
for (int i = 0; i < file.length; i++) {
String originalFilename = file[i].getOriginalFilename();
InputStream inputStream = file[i].getInputStream();
OSSUtil.uploadImageToOSS(originalFilename, inputStream);
}
return BaseResponse.ok(200,"OK");
}
关于会遇见的Exception
org.apache.tomcat.util.http.fileupload.FileUploadBase$FileSizeLimitExceededException: The field file exceeds its maximum permitted size of 1048576 bytes.
at org.apache.tomcat.util.http.fileupload.FileUploadBase$FileItemIteratorImpl$FileItemStreamImpl$1.raiseError(FileUploadBase.java:630)
at org.apache.tomcat.util.http.fileupload.util.LimitedInputStream.checkLimit(LimitedInputStream.java:76)
at org.apache.tomcat.util.http.fileupload.util.LimitedInputStream.read(LimitedInputStream.java:135)
at java.io.FilterInputStream.read(FilterInputStream.java:107)
at org.apache.tomcat.util.http.fileupload.util.Streams.copy(Streams.java:98)
at org.apache.tomcat.util.http.fileupload.util.Streams.copy(Streams.java:68)
at org.apache.tomcat.util.http.fileupload.FileUploadBase.parseRequest(FileUploadBase.java:293)
org.apache.tomcat.util.http.fileupload.FileUploadBase$FileSizeLimitExceededException: The field file exceeds its maximum permitted size of 1048576 bytes.
根据异常信息可以看出是因为我们单次上传的文件的大小超过了 1048576bytes 也就是超过了1MB的大小。这是因我SpringBoot2.0的默认配置是1MB的小大,所以这个时候我们需要在SpringBoot的配置文件中自定义一下这些属性,我这里是这样配置的。
详细讲解
public interface MultipartFile extends InputStreamSource {
String getName();
@Nullable
String getOriginalFilename();
@Nullable
String getContentType();
....
我们的代码
@RequestMapping("/pic")
@ResponseBody
public BaseResponse uplodFile(@RequestParam("file") MultipartFile[] file) throws Exception {
.....
通过查看MultipartFile
继承了InputStreamSource
那么传递给我们的最重要的信息就是我们卡伊拿到文件流了InputStream inputStream = file[i].getInputStream();
那么所有问题就迎刃而解了。
我们使用的阿里的OSS对象存储,代码中使用的OSSUtils
我在之前的代码中也贴出过相应的代码传送门:https://www.jianshu.com/p/2e419be10729