单文件上传
表单上传
1.前端表单
<form action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name="file">
<input type="submit" value="提交">
</form>
2.后端接收
@PostMapping("/upload")
public String upload(MultipartFile file, HttpServletRequest req) {
SimpleDateFormat sdf = new SimpleDateFormat("/yyyy/MM/dd/");
String format = sdf.format(new Date());
String realPath = req.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 = req.getScheme() + "://" + req.getServerName() + ":" + req.getServerPort() + "/img" + format + newName;
return url;
} catch (IOException e) {
e.printStackTrace();
}
return "error";
}
ajax上传
1.前端
<div id="result"></div>
<input type="file" id="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,
contentType:false,
data:formData,
success:function (msg) {
$("#result").html(msg);
}
})
}
</script>
2.后端相同
多文件上传
表单上传
1.前端
<form action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name="file"> //此时选择多个文件
<input type="file" name="file"> //或者使用多个input标签
<input type="submit" value="提交">
</form>
2.后端
@PostMapping("/uploads")
public String uploads(MultipartFile[] files, //如果使用同一个名称，使用数组接收，如果不是同一名称，定义多个MultipartFile
HttpServletRequest req) {
SimpleDateFormat sdf = new SimpleDateFormat("/yyyy/MM/dd/");
String format = sdf.format(new Date());
String realPath = req.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 = req.getScheme() + "://" + req.getServerName() + ":" + req.getServerPort() + "/img" + format + newName;
System.out.println(url);
} catch (IOException e) {
e.printStackTrace();
}
}
return "success";
}
ajax上传
1.前端
<div id="result"></div>
<input type="file" name="Files" id="Files" multiple="multiple" value="上传Files" />
<input type="button" value="上传" onclick="uploadFile()">
<script>
function uploadFile() {
var formData = new FormData();//就像cookie一样用,存入files[i];;数组形式
var files = document.getElementById("Files").files;
for (var i = 0; i < files.length ; i++)
{
formData.append("files_"+i, files[i]);
}
$.ajax({
url: "/uploads",//请求地址
dataType: "json",//数据格式
type: "POST",//请求方式
async: true,//是否异步请求
cache: false,//上传文件无需缓存
contentType: false,//必须
processData: false,//用于对data参数进行序列化处理 这里必须false
data: formData,
success: function (data) {
}
})
}
</script>
2.后端一致
文件上传配置
方法一：在配置文件中添加配置
#静态资源对外暴露的访问路径
file.staticAccessPath=/static/image/**
#文件上传目录（注意Linux和Windows上的目录结构不同）
#file.uploadFolder=/root/uploadFiles/
file.uploadFolder=d://uploadFiles/ #特别要注意此位置
#文件大小设置
spring.servlet.multipart.enabled=true #是否支持 multipart 上传文件
spring.servlet.multipart.max-file-size=30MB #设置单个文件的大小
spring.servlet.multipart.max-request-size=100MB #设置总上传的数据大小
spring.servlet.multipart.file-size-threshold=0，支持文件写入磁盘
spring.servlet.multipart.location=，上传文件的临时目录
spring.servlet.multipart.resolve-lazily=false，是否支持 multipart 上传文件时懒加载
方法二：在启动类中添加Bean配置
启动类 或 配置类
/**
* 文件上传配置
* @return
*/
@Bean
public MultipartConfigElement multipartConfigElement() {
MultipartConfigFactory factory = new MultipartConfigFactory();
// 单个文件数据大小
factory.setMaxFileSize("10240KB"); //KB,MB
// 设置总上传数据总大小
factory.setMaxRequestSize("102400KB");
// 设置文件路径
factory.setLocation(PropertyUtil.getPropertValueByKey("rootpath"));
return factory.createMultipartConfig();
}