Vue|ssm和vue实现图片的上传和回显，以及图片的访问 Vue|ssm整合

原来有做过图片的上传，也不是很难，而且在访问图片时候也没有发现问题，但是在刚刚要完成的一个小项目里面却屡屡爆出问题，困扰了整整一天，终于解决。但是也不知道是怎么解决的，只是把代码搬出来，防止以后犯错。

实现思路：
在图片的上传其实是分为两步：
（1）先将图片上传到指定的文件夹下边，并且返回一个图片的名称。
（2）将整个表单，包括图片的名称一起保存到数据库中去。

第一步实现
前端vue的表单代码

文章图片文章图片

Controller类的书写

@Controller @RequestMapping(value = "https://www.it610.com/imgs",produces = { "text/html; charset=UTF-8; ", "application/json; charset=UTF-8; " }) public class ImgUploadController {@RequestMapping("/imgUpload") @ResponseBody public String imgUpload(@RequestParam("picture") MultipartFile picture, HttpServletRequest request){//获取文件在服务器的储存位置 String path = request.getSession().getServletContext().getRealPath("/upload"); File filePath = new File(path); System.out.println("文件的保存路径："+filePath); if(!filePath.exists() && !filePath.isDirectory()){ System.out.println("目录不存在"); filePath.mkdir(); }//获取原始文件名称(包含格式) String originalFilename = picture.getOriginalFilename(); System.out.println("原始文件的名称是："+originalFilename); //获取文件类型，以最后一个`.`为标识 String type = originalFilename.substring(originalFilename.lastIndexOf(".") + 1); System.out.println("文件类型："+type); //获取文件名称（不包含格式） String name = originalFilename.substring(0, originalFilename.lastIndexOf(".")); //设置文件新名称: 当前时间+文件名称（不包含格式） Date d = new Date(); SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmss"); String date = sdf.format(d); String fileName = date + "." + type; System.out.println("新文件名称：" + fileName); //在指定路径下创建一个文件 File targetFile = new File(path, fileName); //将文件保存到服务器指定位置try { picture.transferTo(targetFile); System.out.println("上传成功"); //将文件在服务器的存储路径返回 ReturnMsg returnMsg = new ReturnMsg("200",fileName); return JSON.toJSONString(returnMsg); } catch (IOException e) { System.out.println("上传失败"); e.printStackTrace(); ReturnMsg returnMsg = new ReturnMsg("400","上传失败"); return JSON.toJSONString(returnMsg); }}}

第二步实现
vue的html代码：

文章图片文章图片 {{item.class_name}} 立即创建重置

vue的js代码：

submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { console.log("名称"+this.ruleForm.name); console.log("描述"+this.ruleForm.desc); console.log("隐私级别："+ this.result_data.secrecy_level); console.log("谜语类型："+ this.result_data.con_type); this.result_data.con_name = this.ruleForm.name; this.result_data.con_desc = this.ruleForm.desc; this.result_data.user_id = JSON.parse(localStorage.getItem("user")).id; this.result_data.con_type = this.result_data.con_type; this.result_data.secrecy_level = this.ruleForm.delivery; this.result_data.img_path = this.ruleForm.img_path; console.log(this.result_data)var api = this.GLOBAL.host+"saywords/saveSaywords"; this.$axios.post(api,this.result_data).then((response)=>{ // console.log(response.data) if(response.data.code == '200'){ this.$alert("发布成功","提示",{ confirmButtonText:'确定', callback:action=>{ this.$refs[formName].resetFields(); this.getSaywords(); this.result_data.con_type = []; } }) } },(error)=>{ console.log(error) }); } else { console.log('error submit!!'); return false; } }); },

Controller代码：

@RequestMapping("/saveSaywords") @ResponseBody public String save(@RequestBody String usaywords){ Saywords saywords = JSON.parseObject(usaywords,Saywords.class); saywordsService.save(saywords); ReturnMsg returnMsg = new ReturnMsg("200","成功"); return JSON.toJSONString(returnMsg); }

【Vue|ssm和vue实现图片的上传和回显，以及图片的访问】