给博客增加图片上传功能

• • 改变form表单的enctype类型
  • controller层
  • 表单验证
  • 总结

改变form表单的enctype类型

enctype="multipart/form-data"

这样才支持文件上传

controller层

需要新增MultipartFile类用于接收前端传过来的文件，为空判断是因为，如果博主不选择上传文件文件而是一个url的话，MultipartFile对象会是空的，会报错：下标溢出，你懂的

@PostMapping("/blogs")
    public String post(@RequestParam("fileUpload") MultipartFile fileUpload, Blog blog, RedirectAttributes attributes, HttpSession session){
        //上传图片相关
        //获取文件名
        String fileName = fileUpload.getOriginalFilename();
        if(!fileUpload.isEmpty()) {
            //获取文件后缀名
            String suffixName = fileName.substring(fileName.lastIndexOf("."));
            //重新生成文件名
            fileName = UUID.randomUUID() + suffixName;
            //给blog的首图编写正确的路径
            blog.setFirstPicture("/images/" + fileName);
        }
        //获取项目classes/static的地址
        String staticPath = ClassUtils.getDefaultClassLoader().getResource("static").getPath();
        //指定本地文件夹存储图片
        String savePath = staticPath + File.separator + "images" + File.separator + fileName;

        //blog相关
        blog.setUser((User) session.getAttribute("user"));
        blog.setType(typeService.getType(blog.getType().getId()));
        blog.setTags(tagService.listTag(blog.getTagIds()));
        Blog b;
        if(blog.getId() == null){
            b = blogService.saveBlog(blog);
        }else {
            b = blogService.updateBlog(blog.getId(),blog);
        }
        //判断博客和文件的上传是否成功
        try {
            //将图片保存到static/images文件夹里  文件非空的情况
            if(!fileUpload.isEmpty()) {
                fileUpload.transferTo(new File(savePath));
            }
            if(b == null){
                attributes.addFlashAttribute("message","操作失败");
            }
        } catch (Exception e) {
            e.printStackTrace();
            attributes.addFlashAttribute("message","操作成功");
        }
        return REDIRECT_LIST;
    }

ps：之前看网上的同志搞啥MultipartFile对象为null，搞配置类@Configuration，配置来，配置去的，把我绕晕了，其实我根本不需要向他们那样弄，是自己的锅，因为我们不一样，啧啧，多数是旧项目迁移问题，在本springboot项目中不存在，我的错是这样的：

 $('#fileUpload).val('');

在选择文件之又把选择的文件value值给清空了，所以后台接收到的fileUpload是空的，并且没有报错，还是得相信自己，md。

表单验证

因为用的semantic ui，所以官网一查做如下的上传验证,用的正则表达式简单的前端验证：

firstPicture : {
          identifier: 'firstPicture',
          rules: [{
            type : 'empty',
            prompt: '首图：请输入博客首图'
          },{
            type : 'regExp',
            value: '/[\\s\\S]+\\.(jpg)|(jpeg)|(png)|(bmp)|(gif)/i'
          }]
        },

总结

费了两天的时间将上传图片搞定了，所以全栈挺好的[doge]