springboot + maven 图片上传(完整版)

冷不防 2022-05-24 05:10 197阅读 0赞

1、前端显示

![20180521142939497][]

2、数据库显示

![20180521143018892][]

3、代码：

3.1、前端代码

//上传图片
    	function fileSelect() {
    		$('#choseImg').click();
    	}
    	//文件选择后触发函数
    	function fileChange() {
    		/*window.URL.createObjectURL本地预览*/
    		var fileImg = window.URL.createObjectURL($("#choseImg")[0].files[0]);
    		$("#fileimg").attr('src', fileImg);
    		// $("#avatar").val(fileImg);
    		$("#fileimg").load(function () {
    			window.URL.revokeObjectURL(fileImg);
    		})  /*当图片加载后释放内存空间，但在jQuery3.2.1中会报错。浏览器关闭后也会自动释放*/
    	}

$("#sub-btn").click(function () {
    
    		//const _param = {name:$('#username').val(),idcard:$('#idcard').val()}
    		submitWaring()
    	});
    		//信息提交验证
        function submitWaring(from){
                    var name =$('#username').val();
                    var  identity=$('#idcard').val();
                    var reg = /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)/;
                        if(name.length==0){
                            layer.alert('姓名不能为空！！！');
                            return false;
                        }
                        
                            if(identity.length!=0){
                                if(!(reg).test(identity)){
                                    layer.alert("身份证输入不合法");		
                                    return  false;
                                }
                            }
                    
                    addWarning();		
                }		
    function addWarning(){
        layer.confirm('是否确认提交', {
                btn: ['确认', '取消']
                }, function (index) {
                    $.ajax({
                            url: "addWarning",
                            type: "post",
                            data: {name:$('#username').val(),identity:$('#idcard').val(),casetype: $('#casetype').val(),impfilepath: $('#impfilepath').val()},
                            dataType: "json",
                            success: function (d) {
                                    alert("提交成功!");
                                    layer.close(index);
                                    $('#form-sub')[0].reset();  
                                    $("#fileimg").attr('src', '${re.contextPath}/plugin/index/images/addphoto.png');
                            }
                            })  
                }, function () {
                return;
                });		      
    }

fileinput代码：

需要用到的js:

3.2、java代码：

private  String uploadPath = "c:\\export\\";

需要定义一个已知路径，因为浏览器无法获取本地图片路径，我们将图片复制到已知路径下，再返回图片路径

/**
         * @author
         * @param request
         * @param response
         * @return 上传图片
         * @throws Exception
         */
         @ResponseBody
     	 @RequestMapping(value = "uploadimg",method = RequestMethod.POST)
     	public Map<String, Object>   uploadimg(HttpServletRequest request,HttpServletResponse response)
           throws Exception {
    		   request.setCharacterEncoding("UTF-8");
    		
    		   Map<String, Object> json = new HashMap<String, Object>();
    		   MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
    		   
    		   /** 页面控件的文件流* */
    		   MultipartFile multipartFile = null;
    		   Map map =multipartRequest.getFileMap();
    		    for (Iterator i = map.keySet().iterator(); i.hasNext();) {
    		           Object obj = i.next();
    		           multipartFile=(MultipartFile) map.get(obj);
    		
    		          }
    		   /** 获取文件的后缀* */
    		   String filename = multipartFile.getOriginalFilename();
    		   File file = new File(uploadPath);        
    		   if (!file.exists()) {        
    		   file.mkdirs();        
    		   }   
    		   Map<String ,Object> sysParamMap = new HashMap<String,Object>();
    		   String filePath = uploadPath + filename;
    		   sysParamMap.put("filePath", filePath);
    		   File uploadFile = new File(filePath);
    		   FileCopyUtils.copy(multipartFile.getBytes(), uploadFile);   
    		   return sysParamMap;
     	  }

数据入库：

@ResponseBody   
       @RequestMapping(value = "addWarning",method = RequestMethod.POST)
     		public Object addWarning(){
     		Map<String, Object> map = getMapParams();
     		JSONObject obj=new JSONObject();
     		//得到图片路径
     	    String impfilepath= map.get("impfilepath").toString();
     	    File file = new File(impfilepath);
     	    byte[] data = getBytes(file);
     	     try {
     			if(map!=null){
     				Warning warn = new Warning();
     				warn.setNAME(map.get("name").toString());
     				warn.setIDENTITY(map.get("identity").toString());
     				warn.setCASETYPE(map.get("casetype").toString());
     				warn.setPIC(data);
     				warn.setUSER_ID(this.getUser().getUsername().toString());
     				warningMapper.addWarning(warn);
     				rundeletefile(impfilepath);
     				obj.put("info", "提交成功");
     				}else{
     					obj.put("info", "提交失败");
     				}
     		} catch (MyException e) {
               e.printStackTrace();		}
     	     	
     		   	Object jsonObject = JSONObject.toJSON(obj);
     	        return jsonObject;
     	 }

文件转byte\[\]:

/**
     * 文件转byte[]
     * @param file
     * @return
     */
       public byte[] getBytes(File file){  
           
           byte[] buffer = null;
           if (file == null){
               return buffer;
           } else {             
               try {     
                   FileInputStream fis = new FileInputStream(file);  
                   ByteArrayOutputStream bos = new ByteArrayOutputStream(1000);  
                   byte[] b = new byte[1000];  
                   int n;  
                   while ((n = fis.read(b)) != -1) {  
                       bos.write(b, 0, n);  
                   }  
                   fis.close();  
                   bos.close();  
                   buffer = bos.toByteArray();  
               } catch (FileNotFoundException e) {  
                   e.printStackTrace();  
               } catch (IOException e) {  
                   e.printStackTrace();  
               }
               
           }
             
            return buffer;  
     }

删除临时文件：

/** 
        * 删除临时文件 
        */ 
        private void rundeletefile(String delpath) { 
               try { 
    
                       File file = new File(delpath); 
                       if (!file.isDirectory()) { 
                               file.delete(); 
                       }
                       } 
    
               } catch (Exception e) { 
                       System.out.println("rundeletefile()   Exception:" + e.getMessage()); 
               } 
       }

[20180521142939497]: /images/20220524/3153091091994cac8b2548992e048ad5.png
[20180521143018892]: /images/20220524/d17ca15c1ecf40cb9102d147a46e412c.png