ajax上传文件，图片并显示与删除(spring boot)

**

思路：先上传文件然后在读出来

**
之前本人都是用form提交上传文件，现在写个ajax的文件上传

先看下效果： 上传并在页面显示

关键代码：在启动类里面加入

//上传文件
	@Override
	 public void addResourceHandlers(ResourceHandlerRegistry registry) {
	     registry.addResourceHandler("/imctemp-rainy/**").addResourceLocations("file:D:/qqz7z8/");
	     //super.addResourceHandlers(registry);
	}

前端 html代码 :

<div id="app">
	<input type="file" name="file" id="file" multiple="multiple">
    <p id="url"><img src="" width=200></p>
    <input type="button" id="button" v-on:click="ff()" value="上传" >
</div>

前端 vue-ajax 代码 ：

var vm=new Vue({
	 el:"#app",
	 data:{
		 
	 },
	 methods:{
		 ff:function(){
			 //alert(1);
			 var form = new FormData();
	            form.append("file", document.getElementById("file").files[0]);
	            alert($("#file").val());
	             $.ajax({
	                 url: "/ht/upload",      	//控制器路径  
	                 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;   //获取图片路径
	                    	 alert(pic);
	                     	$("#url img").attr("src",pic);				//id为url的 改变属性 为图片+图片路径
	                     	// 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.println(contentType);
	  		String fileName = System.currentTimeMillis()+file.getOriginalFilename();  //可以改图片名字，改完要加后缀
	  		System.out.println(fileName);
	  		String filePath = "D:/qqz7z8";
		    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        
	  	
	  		}   
	  		String str="/imctemp-rainy/"+fileName;
	
	  		//返回json
	  	    return jo;    
	
	  	}   

删除图片的后端代码

//删除
	@RequestMapping("delAll")
	@ResponseBody
	public String delAll(HttpServletRequest req) {
		int x=Integer.parseInt(req.getParameter("nid"));   //接收删除id
		News news= newsService.findById(x);
		String str1=news.getTuhref();     //得到图片的路径字段
		String str2[]=str1.split("/");	  //截取一部分   获取图片名
		File f=new File("D:/qqz7z8/"+str2[str2.length-1]);
		f.delete();			//删除
	    return "1"; 
	}