前台：
<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);
}