SpringBoot结合Vue实现图片上传
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 "图片上传失败!"; }