利用 ajax 上传图片 (Spring Boot)

ゞ浴缸里的玫瑰 2023-05-30 13:58 65阅读 0赞

**效果如下：**

![20191110185810462.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MDM3MjY0_size_16_color_FFFFFF_t_70][]

**1.启动类中****加****入**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MDM3MjY0_size_16_color_FFFFFF_t_70 1][]

**SpringBoot重写addResourceHandlers映射文件路径**

@Override
    	 public void addResourceHandlers(ResourceHandlerRegistry registry) {
    	     registry.addResourceHandler("/imctemp-rainy/**").addResourceLocations("file:D:/E/");
    	 }

设置静态资源路径

2.   表单 前端 页面

$(function () {
            $("#button").click(function () {
                var form = new FormData();
                form.append("file", document.getElementById("file").files[0]);
                 $.ajax({
                     url: "/stu/upload",        //后台url
                     data: form,
                     cache: false,
                     async: false,
                     type: "POST",                   //类型，POST或者GET
                     dataType: 'json',              //数据返回类型，可以是xml、json等
                     processData: false,
                     contentType: false,
                     success: function (data) {      //成功，回调函数
                         if (data) {
                        	 var pic="/imctemp-rainy/"+data.fileName;
                         	$("#url img").attr("src",pic);
                         	// alert(JSON.stringify(data));
    
                         } else {
                         	alert("失败");
                         }
                         
                     },
                     error: function (er) {          //失败，回调函数
                    	 alert(JSON.stringify(data));
                     }
                 });
            })
    
        })

**控制器**

public static void uploadFile(byte[] file, String filePath, String fileName) throws Exception {        
    		File targetFile = new File(filePath); 
    		if (!targetFile.exists()) {
    		   targetFile.mkdirs();    
    		}        
    		FileOutputStream out = new FileOutputStream(filePath +"/"+ fileName);
    		out.write(file);      
    		out.flush();   
    		out.close(); 
    	}
      //处理文件上传
      	@ResponseBody //返回json数据  
      	@RequestMapping(value = "upload", method = RequestMethod.POST) 
      	public JSONObject uploadImg(@RequestParam("file") MultipartFile file,HttpServletRequest request) {        
      	    String contentType = file.getContentType(); 
      	    System.out.print(contentType);
      		String fileName = System.currentTimeMillis()+file.getOriginalFilename();  		
      		String filePath = "D:/E";
    	    JSONObject jo = new JSONObject();//实例化json数据
    
      		if (file.isEmpty()) {   
      			jo.put("success", 0);
      			jo.put("fileName", "");
      		}        
      		try {  
      		   uploadFile(file.getBytes(), filePath, fileName);  
      		   jo.put("success", 1);
      		   jo.put("fileName", fileName);
      		  // jo.put("xfileName", filePath+"/"+fileName);
      		} catch (Exception e) {  
      		// TODO: handle exception        
      	
      		}   
    		 
    
      		//返回json
      	    return jo;    
    
      	}

[20191110185810462.png]: https://img-blog.csdnimg.cn/20191110185810462.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MDM3MjY0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191110185813723.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MDM3MjY0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MDM3MjY0_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191110185425258.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MDM3MjY0,size_16,color_FFFFFF,t_70