版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/babybabyup/article/details/84444272
前言
今天忽然发现,之前springmvc中我经常使用的文件上传的js包不可用在springboot中不可用了,使用包里的方法访问不到后台上传文件接口,只能自己重新实现了。
之前没有接触过这块,世纪项目中也只用到过几次而已,只好多踩一踩坑
正文
直接先把代码列出来吧
后台controller
/**
* 文件上传
* @param file 接收前端的formdata
* @return 包含上传信息的json
*/
@RequestMapping(value = "/fileup", method = RequestMethod.POST)
@ResponseBody
public JSONObject singleFileUpload(@RequestParam("file")MultipartFile file){
JSONObject jsonObject = new JSONObject();
if (file.isEmpty()) {
jsonObject.put("result", -1);
return jsonObject;
}
String fileName = file.getOriginalFilename();
StringBuilder stringBuilder = new StringBuilder();
File fileDir = new File("src/main/resources/static/");
String path = fileDir.getAbsolutePath();
if(!fileDir.exists()){
fileDir.mkdir();
}
try {
file.transferTo(new File(path, fileName));
jsonObject.put("result", 1);
jsonObject.put("message", "ok");
jsonObject.put("url", stringBuilder.append(path).append(fileName).toString());
} catch (Exception e) {
jsonObject.put("result", 0);
e.printStackTrace();
}
return jsonObject;
}
将文件保存在src/main/resources/static/
下,并且使用文件原名。
前端代码:
前端要引入jquery,要用到$.ajax()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Uplaod</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<!--<form action="http://localhost:8080/fileup" enctype="multipart/form-data" method="post">-->
<!--<input type="file" id="file" name="file">-->
<!--<input type="submit" id="butto" value="上传">-->
<!-- </form>-->
<p>JSON</p>
<input type="file" id="file" name="file">
<input type="button" id="button" value="上传" >
返回的url为:<p id="url"></p>
</body>
<script type="text/javascript">
$(function () {
$("#button").click(function () {
var form = new FormData();
form.append("file", document.getElementById("file").files[0]);
$.ajax({
url: "http://localhost:8080/fileup", //后台url
data: form,
cache: false,
async: false,
type: "POST", //类型,POST或者GET
dataType: 'json', //数据返回类型,可以是xml、json等
processData: false,
contentType: false,
success: function (data) { //成功,回调函数
if (data.result == 1) {
$("#url").html(data.url);
alert("成功!")
} else {
alert("失败");
}
},
error: function (er) { //失败,回调函数
alert(er);
}
});
})
})
</script>
</html>
注释掉的是通过form表单提交,会存在页面刷新的感觉。
运行试试
提交后,前端显示上传成功
在后台查看
OK,代码可用。