Springboot+Vue实现将图片和表单一起提交到后端，同时将图片地址保存到数据库、再次将存储的图片展示到前端vue页面

您所在的位置：网站首页 › 添加图片的图片怎么保存 › Springboot+Vue实现将图片和表单一起提交到后端，同时将图片地址保存到数据库、再次将存储的图片展示到前端vue页面

Springboot+Vue实现将图片和表单一起提交到后端，同时将图片地址保存到数据库、再次将存储的图片展示到前端vue页面

2024-04-24 09:39| 来源: 网络整理| 查看: 265

文章目录 1、实现的效果2、Vue前端3、图片上传4、字段变量根据自己的字段名自行设置（这里不给出了，哈哈哈）5、method方法5.1、图片显示在选择框中，同时返回后端存储的地址5.2查看后端返回给前端的图片地址5.3 提交表单数据到后端 6、后端的配置6.1、处理前端传输过来的图片、将图片地址返回给前端6.2、application.yml文件中6.3、这个重点配置 7、添加商品的接口（使用了swagger）

1、实现的效果

在这里插入图片描述

2、Vue前端上传图片重置取消确定 3、图片上传

重点部分：==

在这里插入图片描述

4、字段变量根据自己的字段名自行设置（这里不给出了，哈哈哈） 5、method方法 5.1、图片显示在选择框中，同时返回后端存储的地址 //图片回显 handleAvatarSuccess(res, file) { console.log(res) this.imageUrl = res.data.final_fileName sessionStorage.setItem("imgUrl",this.imageUrl) alert(this.imageUrl) }, //图片上传大小限制 beforeAvatarUpload(file) { const isLt2M = file.size / 1024 / 1024 < 2; if (!isLt2M) { this.$message.error('上传头像图片大小不能超过 2MB!'); } return isLt2M; },

解释：在这里插入图片描述

5.2查看后端返回给前端的图片地址

在这里插入图片描述

5.3 提交表单数据到后端 //提交表单 submitForm() { let _this = this; _this.ruleForm.imageUrl =sessionStorage.getItem("imgUrl") axios.post('/car/addcar',this.ruleForm).then(resp => { if(resp.data.code==200){ _this.$alert('《'+_this.ruleForm.name+'》添加成功', '消息', { confirmButtonText: '确定', callback: action => { _this.adddialogVisible=false _this.showAllUsers(); } }); } }); }, 6、后端的配置 6.1、处理前端传输过来的图片、将图片地址返回给前端 @Value("${pictureFile.path}") private String picturePath; @Value("${pictureFile.path-mapping}") private String picturePath_mapping; //这个写在了配置文件中 @PostMapping("/upload/img") public Result upload(MultipartFile file) { String fileName = file.getOriginalFilename(); // 文件名 String suffixName = fileName.substring(fileName.lastIndexOf(".")); // 后缀名 fileName = UUIDutilsu.getUUID() + suffixName; // 新文件名 File dest = new File(picturePath + fileName); if (!dest.getParentFile().exists()) { dest.getParentFile().mkdirs(); } try { file.transferTo(dest); } catch (IOException e) { e.printStackTrace(); } String final_fileName = "http://localhost:8282" + picturePath_mapping + fileName; System.out.println(final_fileName); return Result.ok().data("final_fileName",final_fileName); }

讲解：UUIDutilsu.getUUID()是我写的一个UUID的工具类。Result.ok().data("final_fileName",final_fileName);是统一返回给前端的数据格式。如上图所示。Result是我封装好的统一返回给前端数据的字段。这里可以直接返回String类型的字符串

6.2、application.yml文件中 pictureFile: path: "G:/BISHE/upload/" path-mapping: "/myImg/" resources: static-locations: classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/,file:${pictureFile.path-mapping} 6.3、这个重点配置 @Configuration public class URLConfig implements WebMvcConfigurer { @org.springframework.beans.factory.annotation.Value("${pictureFile.path}") private String picturePath; @Value("${pictureFile.path-mapping}") private String picturePath_mapping; @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler(picturePath_mapping+"**").addResourceLocations("file:"+picturePath); } } 7、添加商品的接口（使用了swagger） @ApiOperation(value = "添加汽车", notes = "添加汽车") @ApiImplicitParams({ @ApiImplicitParam(name = "Car") }) @RequestMapping(value = "/car/addcar", method = RequestMethod.POST) public Result addCar(@RequestBody Car car) { car.setStatus(1);//新增加的商品默认是上架商品 String date = CurrentTime.getCurrentTime(); car.setDate(date); int rs = carService.addCar(car); if (rs > 0) { return Result.ok(); } else { throw new BusinessException(ResultCode.ADD_CAR_ERROR.getCode(), ResultCode.ADD_CAR_ERROR.getMessage()); } }

【本文地址】

Springboot+Vue实现将图片和表单一起提交到后端，同时将图片地址保存到数据库、再次将存储的图片展示到前端vue页面

Springboot+Vue实现将图片和表单一起提交到后端，同时将图片地址保存到数据库、再次将存储的图片展示到前端vue页面

今日新闻

推荐新闻