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

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

 

实现思路：

在图片的上传其实是分为两步：

（1）先将图片上传到指定的文件夹下边，并且返回一个图片的名称。

（2）将整个表单，包括图片的名称一起保存到数据库中去。

 

第一步实现

前端vue的表单代码

 

Controller类的书写

@Controller
@RequestMapping(value = "/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);
    }