SpringBoot页面上传图片文件

红太狼 2021-06-24 13:58 528阅读 0赞

先说下实现原理，个人觉得原理是这样的，如果各位老鸟发现有问题，请多多调教一波

首先在页面是一个表单，然后表单提交，提交到控制器，注意啊，到控制器的时候就是重点了。首先控制器会获取项目发布的路径和在这基础上你自定义的文件夹名比如（C:\\Users\\Administrator\\AppData\\Local\\Temp\\tomcat-docbase.973044055370348158.8882\\statics\\uploadfiles），获取完之后，如果自定义文件夹名存在则不创建，反之则创建。创建完之后会把图片上传到刚刚创建的文件夹里，最后就完成上传操作。

页面代码

js代码

$(function(){ 
            //点击选择文件显示头像的 $("input[type='file']").change(function(){ 
    
                var file = this.files[0]; if (window.FileReader) { 
                    var reader = new FileReader();
                    reader.readAsDataURL(file); //监听文件读取结束后事件 reader.onloadend = function (e) { 
                        $(".img").attr("src",e.target.result);    //e.target.result就是最后的路径地址
                    };
                }
            });
        }); function submitInfo(sendData) { 
                $.ajax({ 
                    url: get_result_url
                    , data: sendData
                    , type: "POST"
                    , contentType: 'application/x-www-form-urlencoded; charset=UTF-8'
                    , async: false //同步请求 , success: function (data) { 
                        if (data == "true") { 
                            parent.layer.msg("新增成功！", { icon: 1});
                            parent.$("#jqGrid").trigger("reloadGrid");
                        } else { 
                            layer.msg(data, { icon: 5});
                        }
                    }
                });
            }
    
           
            form.on('submit(sure)', function (data) { 
                
                var data= $("form").serialize();
                submitInfo(data);
            });

控制器后台代码

@PostMapping("workflowLHLSAdd")
        @ResponseBody
        public String workflowLhlsAddPost(MwWorkitem mwWorkitem,
                                          HttpSession session, HttpServletRequest request,
                                          @RequestParam(value = "a_idPicPath",required = false) MultipartFile attach){ 
            String idPicPath=null;
            try{ 
    
                if(!attach.isEmpty()){ 
                    //获取项目实际发布的上传路径并且加上你自己想创建的文件夹名File.separator是分割符
                    String path=session.getServletContext().getRealPath("statics"+ File.separator+"uploadfiles");
                    String oldFileName=attach.getOriginalFilename();//原文件名
                    String prefix= FilenameUtils.getExtension(oldFileName);//源文件后缀
                    int filesize=500000;
                    if(attach.getSize()>filesize){ //上传大小不得超过500kb
                        request.setAttribute("uploadFileError","* 上传大小不得超过500kb");
                        return "useradd";//返回添加页面
                    }else if(prefix.equalsIgnoreCase("jpg")||prefix.equalsIgnoreCase("png")||
                            prefix.equalsIgnoreCase("jpeg")||prefix.equalsIgnoreCase("pneg")
                    ){ 
                        String fileName= System.currentTimeMillis()+ RandomUtils.nextInt()+"_Personal.jpg";
                        File targetFile=new File(path,fileName);
                        if(!targetFile.exists()){ 
                            targetFile.mkdirs();
                        }
                        //保存
                        try { 
                            //里面底层源码就是把文件复制到你想复制到的文件目录下
                            attach.transferTo(targetFile);
                        } catch (IOException e) { 
                            e.printStackTrace();
                            request.setAttribute("uploadFileError","* 上传失败！");
                            return "useradd";
                        }
                        //拼接图片路径
                        idPicPath="statics"+ File.separator+"uploadfiles"+File.separator+fileName;
                    }else { 
                        request.setAttribute("uploadFileError","* 上传图片格式不正确");
                        return "useradd";
                    }
                }
                mwWorkitem.setImgicon(idPicPath);
                //添加语句
                Integer rows = mwWorkitemService.insertMwWorkitem(mwWorkitem);
                if(rows>0){ 
                    return "true";
                }else { 
                    return "添加失败";
                }
            }catch(Exception e){ 
                return e.getMessage();
            }
        }

如果各位老鸟发现博文有问题，欢迎指点一二