SpringBoot结合Vue实现图片上传

效果

页面图片上传 上传完成之后

Vue中图片上传核心代码

在main.js中引入axios import axios from axios Vue.prototype.$ajax = axios; 在图片上传的文件中写文件上传控件 <li> <h3>添加新图：</h3> <input type="file" id="saveImage" name="myphoto" accept="image/png,image/gif,image/jpeg" ref="new_image"> <el-button @click="addImage">确认添加</el-button> </li> 添加图片函数 addImage: function () { let self = this; if (self.$refs.new_image.files.length !== 0) { var formData = new FormData() formData.append(image_data, self.$refs.new_image.files[0]); //单个文件进行上传 self.$ajax.post(/addImage, formData, { headers: { "Content-Type": "multipart/form-data" } }).then(response => { }) } }

SpringBoot中图片下载核心控制类代码

方法核心代码 @RequestMapping("/addImage") @ResponseBody public String addImage(@RequestParam(name = "image_data", required = false) MultipartFile file) { //文件上传 if (!file.isEmpty()) { try { //图片命名 String newCompanyImageName = "newPIC"; String newCompanyImagepath = "D:\"+newCompanyImageName; File newFile = new File(newCompanyImagepath); if (!newFile.exists()) { newFile.createNewFile(); } BufferedOutputStream out = new BufferedOutputStream( new FileOutputStream(newFile)); out.write(file.getBytes()); out.flush(); out.close(); } catch (FileNotFoundException e) { e.printStackTrace(); return "图片上传失败！"; } catch (IOException e) { e.printStackTrace(); return "图片上传失败！"; } } return "图片上传失败！"; }