Controller层
//上传文件 @PostMapping("/fileUpload") @ResponseBody public String FileUpload(@RequestParam("file") MultipartFile[] multipartFile, HttpServletRequest request, HttpServletResponse response) throws IOException { for (int i = 0; i < multipartFile.length; i++) { if (multipartFile[i].getSize() > 0 && !multipartFile[i].isEmpty()) { //获取文件的名称 String originalFilename = multipartFile[i].getOriginalFilename(); // 这里需要注意的是ApplicationHome是属于SpringBoot的类 // 获取项目下resources/static/img路径 ApplicationHome applicationHome = new ApplicationHome(this.getClass()); //读取jar包中的文件流。 String driPath = applicationHome.getSource().getParentFile().toString(); String url = driPath + "\\classes\\img\\"; System.out.println(url); //创建一个文件 存储位置是tomcat的img里面 File file = new File(url + "/" + originalFilename); System.out.println("文件路径是:" + file); multipartFile[i].transferTo(file); } else { return "上传失败!"; } } return "上传成功!"; }
application.yml
#设置上传文件的大小
servlet:
multipart:
enabled: true
max-file-size: 50000000MB
max-request-size: 50000000MB
前端
<div v-if="this.info.showFileUpload">
<input type="file" name="file" id="fileInput">
<button v-on:click="fileUpload">上传</button>
</div>
Vue代码
fileUpload: function () {//上传文件
let inputElement = document.getElementById("fileInput");
console.log(inputElement);
let param = new FormData(); // 创建form对象
param.append("file",inputElement.files[0]); // 通过append向form对象添加数据
let config = {
headers: { "Content-Type":"multipart/form-data" }
};
axios.post("/fileUpload", param, config)
.then(res => {
if (res.data==="上传成功!"){
alert("上传成功!");
this.info.showFileUpload=false; //上传成功关闭div
}else{
alert("上传失败!");
}
});
}