Spring Boot图片上传和取消上传

Spring Boot图片上传和取消上传

pom 文件中加上依赖

<!-- 文件上传 -->
	<!-- https://mvnrepository.com/artifact/commons-fileupload/commons-fileupload -->
	<dependency>
	    <groupId>commons-fileupload</groupId>
	    <artifactId>commons-fileupload</artifactId>
	    <version>1.4</version>
	</dependency>
	<!-- https://mvnrepository.com/artifact/commons-io/commons-io -->
	<dependency>
	    <groupId>commons-io</groupId>
	    <artifactId>commons-io</artifactId>
	    <version>2.6</version>
	</dependency>

controller层

下面的获取当前的系统日期，是为了给图片重命名，防止多次上传同一张图片导致的图片名都一样。

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 uploadImg1(@RequestParam("file") MultipartFile file,HttpServletRequest request) {        
    String contentType = file.getContentType(); 
    //System.out.print(contentType);
    
    //获取当前系统日期
    SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");//设置日期格式
    String timeString=df.format(new Date());// new Date()为获取当前系统时间
    
    //设置图片名
	String fileName = timeString+file.getOriginalFilename();  		
	String filePath = "D:/a";		//路径
    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", "/imctemp-rainy/"+fileName);
	  // System.out.println(filePath+"/"+fileName);
	} catch (Exception e) {  
	// TODO: handle exception        

	}   
	//返回json
    return jo;    

}
		
 /**
 * 删除单个文件
 *
 * @param fileName
 *            要删除的文件的文件名
 * @return 单个文件删除成功返回true，否则返回false
 */
@ResponseBody //返回json数据  
@RequestMapping(value = "deleteFile", method = RequestMethod.POST) 
public String deleteFile(String path) {
	String resultInfo = null;
	//判断图片是否存在
	if (path.equals("no_img.png")) {
		resultInfo = "请选择图片！";
	}else {
		String sb = "D:/a/" + path;
		//System.out.println(sb);
		File file = new File(sb);
		if (file.exists()) {
			if (file.delete()) {
				resultInfo =  "删除成功";
			} else {
				resultInfo =  "删除失败";
			}
		} else {
			resultInfo = "文件不存在！";
		}
	}
	return resultInfo;
}

HTML页面

<div class="form-group">
    <div class="label">
      <label>上传图片：</label>
    </div>
    <div class="field">
        <input type="file" name="file" id="file">
		<p id="url" ><img :src="banner1.bpic" id="imgsrc" width=200></p>
		<input type="button" id="button" @click="tupian()" value="上传" ><input type="button" @click="quxiao()" value="取消">
      <div class="tips"></div>
    </div>
  </div> 
  <div class="form-group">
    <div class="label">
      <label></label>
    </div>
    <div class="field">
      <button class="button bg-main icon-check-square-o" type="button" @click="nadd()"> 提交</button>
    </div>
  </div>
  
  
<!--VUE-->
<script>
var vm=new Vue({
el:"#add",
data:{
	banner1:{},
},
methods:{
	quxiao:function(){
		var imgsrc=$("#imgsrc").attr("src");
		var str_after=imgsrc.split("/");
		var str_img=str_after[str_after.length-1];
		//alert(str_img);
		$.post("/model/deleteFile",{path:str_img},function(data){
			$("#url img").attr("src","/imctemp-rainy/no_img.png");
			vm.navigation.imgsrc="";
			alert(data);
		})
	},
	//下载图片
	tupian:function(){
		var form = new FormData();
        form.append("file", document.getElementById("file").files[0]);
         $.ajax({
             url: "/model/upload",        //后台url
             data: form,
             cache: false,
             async: false,
             type: "POST",                   //类型，POST或者GET
             dataType: 'json',              //数据返回类型，可以是xml、json等
             processData: false,
             contentType: false,
             success: function (data) {      //成功，回调函数
            	 //alert(data.xfileName);
                 if (data) {
                	var pic="/imctemp-rainy/"+data.fileName;
                 	$("#url img").attr("src",pic);
                 	vm.banner1.bpic=data.xfileName;
                 	
                 	// alert(JSON.stringify(data));

                 } else {
                 	alert("失败");
                 }
                 
             },
             error: function (er) {          //失败，回调函数
            	 alert(JSON.stringify(data));
             }
         });
	},
	nadd:function(){
		
		$.post("/home/badd",{banner1:JSON.stringify(vm.banner1)},function(data){
			if(data.success==1){
				alert(data.message);
				window.location.href="/model/type";
			}else{
				alert(data.message);
			}
		})
	}
},
});
</script>

具体效果就是

• 点击浏览，上传 显示图片并保存到文件夹
• 点击取消 从文件夹删除
• 点击提交 保存到数据库