前台：
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
<script src="jquery-3.6.0.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="app">
{{message}}
<input type="file" name="file" id="file" @change='onUpload'>//注意不能带括号
</div>
</body>
</html>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
message: 'test',
},
methods: {
//上传图片
onUpload(e) {
var formData = new FormData();
formData.append('file', e.target.files[0]);
formData.append('type', 'test');
$.ajax({
// url: '/ShopApi/util/upload.weixun',
url: 'http://localhost:8083/order/process/upload',
type: 'POST',
dataType: 'json',
cache: false,
data: formData,
processData: false,
contentType: false,
success: (res) => {
if (res.code === 200) {
alert(6)
}
},
error: function(err) {
alert("网络错误");
}
});
}
}
});
</script>
后台：
@PostMapping("/upload")
public Object batchImportUpload(@RequestParam("file") MultipartFile uploadFile) throws IOException {
log.info("在线批量导入req:");
// 另一种方法参考
// https://www.cnblogs.com/cheng2839/p/12660411.html
//获取项目目录临时路径
String staticPath = ClassUtils.getDefaultClassLoader().getResource("mapper").getPath();
//生成临时目录
File tempfolder = new File(staticPath + "/uploadFile/");
if (!tempfolder.isDirectory()) {
tempfolder.mkdirs();
}
//源文件名
String oldName = uploadFile.getOriginalFilename();
//新文件名
String newName = System.currentTimeMillis() + oldName.substring(oldName.lastIndexOf("."));
File newFile = new File(tempfolder, newName);
//填充新文件
uploadFile.transferTo(newFile);
//新文件路径
String newFileAllName = tempfolder + "/" + newName;
log.info("临时文件全路径:{}" + newFileAllName);
return new Response(ResultCode.OK, newFileAllName);
}