SpringBoot文件上传（图片上传）

这次的文件上传，以图片上传为代表，并且在前台显示图片。其它格式的文件上传差不多也是这样，只是前台的显示不同罢了

在启动类中加入以下代码

//图片上传
@Override
 public void addResourceHandlers(ResourceHandlerRegistry registry) {
     ///imctemp-rainy/，这个应该是相当于给路径起了一个别名，后面的路径修改的话记得在结尾处加斜杠
     registry.addResourceHandler("/imctemp-rainy/**").addResourceLocations("file:E:/ExerciseSpace/SpringBoot/imageg/");
 }

启动类需要继承 WebMvcConfig 或者 直接再 Config中写也可以

控制类代码

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(); 
}
    //处理文件上传
    @ResponBody
    @PostMapping(value = "upload")
    public Result uploadImg(@RequestParam("file") MultipartFile file, HttpServletRequest request) {
        String contentType = file.getContentType();
        //System.out.print(contentType);
        String fileName = System.currentTimeMillis()+file.getOriginalFilename(); //这个是按照时间生成的文件名。连接符后面的是文件本身的名字 		
        String filePath = "E:/ExerciseSpace/SpringBoot/imageg";//这个就是文件的保存路径
        //String imgPath = filePath+fileName;//这个用不到，是用来获取文件路径+文件名字的
        Map<String,Object> map = new HashMap<>();
        if (file.isEmpty()) {
            map.put("success", 0);
            map.put("fileName", "");
        }
        try {
            uploadFile(file.getBytes(), filePath, fileName);
            map.put("success", 1);
            map.put("fileName", fileName);
            // jo.put("xfileName", filePath+"/"+fileName);
        } catch (Exception e) {
            // TODO: handle exception
        }
        //返回json
        return Result.ok(map);
    }

前端页面代码

<input type="file" name="file" id="file" v-on:change="img()">
<p id="url">
 <img src="/imctemp-rainy/no.png" width=200></p><!-- 在还没有添加图片的时候，我在图片的位置上放了一张默认图片，当选择要上传的图片后，选定的图片就会替换现在显示的图片 -->

<!--js代码-->
//图片上传
img:function(){
	var form = new FormData();
	form.append("file", document.getElementById("file").files[0]);//只能上传一个文件
	$.ajax({
	   url: "/menu/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;
	              vm.imgPath=pic;//获取pic，为存入数据库做准备，可能是由于ajax变量作用域的问题，vm有时候会报错。这就需要先在ajax外声明一下  var vm = this；（vm 是vue的变量 var vm = new Vue）
	              $("#url img").attr("src",pic);//替换原来的图片
	              // alert(JSON.stringify(data));
	           } else {
	             alert("失败");
	           }
	                 
	     },
	     error: function (er) {          //失败，回调函数
	           alert(JSON.stringify(data));
	     }
   });
},

以上的代码只是将图片上传到某个文件夹，并没有存入数据库的代码。存入数据库只需要在pic那里将pic获取出来，然后在保存信息的时候加入到里面就可以了