这次的文件上传，以图片上传为代表，并且在前台显示图片。其它格式的文件上传差不多也是这样，只是前台的显示不同罢了
在启动类中加入以下代码
//图片上传@Overridepublic 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}//返回jsonreturn 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", //后台urldata: form,cache: false,async: false,type: "POST", //类型，POST或者GETdataType: '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获取出来，然后在保存信息的时候加入到里面就可以了
