(三)上传头像(控制层)
1.规划异常
上传文件时的异常都是文件异常,所以可以先创建一个文件异常类的基类FileUploadException并使其继承RuntimeException
FileEmptyException:文件为空的异常(没有选择上传的文件就提交了表单,或选择的文件是0字节的空文件) FileSizeException:文件大小超出限制 FileTypeException:文件类型异常(上传的文件类型超出了限制) FileUploadIOException:文件读写异常 FileStateException:文件状态异常(上穿文件时该文件正在打开状态)
2.处理异常
在基类BaseController中进行编写和统一处理
else if (e instanceof FileEmptyException){ result.setState(6000); }else if (e instanceof FileSizeException) { result.setState(6001); } else if (e instanceof FileTypeException) { result.setState(6002); } else if (e instanceof FileStateException) { result.setState(6003); } else if (e instanceof FileUploadIOException) { result.setState(6004); }
异常统一处理方法的修饰符@ExceptionHandler(ServiceException.class)表明我们现在创建的FileUploadException异常类不会被拦截到该方法中,点进@ExceptionHandler注解可以发现传参可以传数组类型,所以可以将异常统一处理方法上的注解改为:
@ExceptionHandler({ServiceException.class,FileUploadException.class})
3.设计请求
请求路径:/users/change_avatar
请求方式:POST(GET请求提交数据只有2KB左右)
请求参数:HttpSession session(获取uid和username),MultipartFile file
响应结果:JsonResult< String>(不能是JsonResult< Void>)
4.处理请求
@RequestMapping("change_avatar") public JsonResult<String> changeAvatar(HttpSession session, MultipartFile file) { /** * 1.参数名为什么必须用file:在upload.html页面的147行<input type= * "file" name="file">中的name="file",所以必须有一个方法的参数名 * 为file用于接收前端传递的该文件.如果想要参数名和前端的name不一 * 样:@RequestParam("file")MultipartFile ffff:把表单中name= * "file"的控件值传递到变量ffff上 * 2.参数类型为什么必须是MultipartFile:这是springmvc中封装的一个 * 包装接口,如果类型是MultipartFile并且参数名和前端上传文件的name * 相同,则会自动把整体的数据包传递给file */ //判断文件是否为null if (file.isEmpty()) { throw new FileEmptyException("文件为空"); } if (file.getSize()>AVATAR_MAX_SIZE) { throw new FileSizeException("文件超出限制"); } //判断文件的类型是否是我们规定的后缀类型 String contentType = file.getContentType(); //如果集合包含某个元素则返回值为true if (!AVATAR_TYPE.contains(contentType)) { throw new FileTypeException("文件类型不支持"); } //上传的文件路径:.../upload/文件名.png /** * session.getServletContext()获取当前Web应用程序的上下文 * 对象(每次启动tomcat都会创建一个新的上下文对象) * getRealPath("/upload")的/代表当前web应用程序的根目录,通过该相 * 对路径获取绝对路径,返回一个路径字符串,如果不能进行映射返回null,单 * 斜杠可要可不要 */ String parent = session.getServletContext().getRealPath("/upload"); System.out.println(parent);//调试用 //File对象指向这个路径,通过判断File是否存在得到该路径是否存在 File dir = new File(parent); if (!dir.exists()) {//检测目录是否存在 dir.mkdirs();//创建当前目录 } //获取这个文件名称(文件名+后缀,如avatar01.png,不包含父目录结构)用UUID // 工具生成一个新的字符串作为文件名(好处:避免了因文件名重复发生的覆盖) String originalFilename = file.getOriginalFilename(); System.out.println("OriginalFilename="+originalFilename); int index = originalFilename.lastIndexOf("."); String suffix = originalFilename.substring(index); //filename形如SAFS1-56JHIOHI-HIUGHUI-5565TYRF.png String filename = UUID.randomUUID().toString().toUpperCase()+suffix; //在dir目录下创建filename文件(此时是空文件) File dest = new File(dir, filename); //java可以把一个文件的数据直接写到同类型的文件中,这里将参数file中的数据写入到空文件dest中 try { file.transferTo(dest);//transferTo是一个封装的方法,用来将file文件中的数据写入到dest文件 /** * 先捕获FileStateException再捕获IOException是 * 因为后者包含前者,如果先捕获IOException那么 * FileStateException就永远不可能会被捕获 */ } catch (FileStateException e) { throw new FileStateException("文件状态异常"); } catch (IOException e) { //这里不用打印e,而是用自己写的FileUploadIOException类并 // 抛出文件读写异常 throw new FileUploadIOException("文件读写异常"); } Integer uid = getUidFromSession(session); String username = getUsernameFromSession(session); String avatar = "/upload/"+filename; userService.changeAvatar(uid,avatar,username); //返回用户头像的路径给前端页面,将来用于头像展示使用 return new JsonResult<>(OK,avatar); }
四)上传头像(前端页面)
1.前端页面代码
在upload.html的上传头像的表单加上三个属性:
action=“/users/change_avatar”
method=“post”(get请求提交数据只有2KB左右)
enctype=“multipart/form-data”(如果直接使用表单进行文件的上传,需要给表单加该属性,这样不会将目标文件的数据结构做修改后再上传,这不同于字符串,字符串随意切割修改也能拼在一起,但文件不行)
2.前端页面优化
springmvc默认为1MB文件可以进行上传,如果超过则会报代码错误,自己在控制层设置的public static final int AVATAR_MAX_SIZE = 1010241024;需要在不超过原有大小的情况下才会起作用,所以要手动修改springmvc默认上传文件的大小
方式1:直接在配置文件application.properties中进行配置:
spring.servlet.multipart.max-file-size=10MB(表示上传的文件最大是多大)
spring.servlet.multipart.max-request-size=15MB(整个文件是放在了request中发送给服务器的,请求当中还会有消息头等其他携带的信息,这里设置请求最大为15MB)
方式2:采用java代码的形式来设置文件的上传大小的限制:
1.该代码必须在主类中进行配置,因为主类是最早加载的,而配置文件必须是最早加载的
2.在主类中定义一个方法,方法名无所谓,但方法需要用@bean修饰,表示该方法返回值是一个bean对象,并且该bean对象被bean修饰,也就是这个方法返回了一个对象,然后把该对象交给bean管理,类似spring中的bean标签,含义是一样的,只是这里改为了注解
3.用@Configuration修饰主类使@bean注解生效,但其实@SpringBootApplication是@SpringBootConfiguration,@EnableAutoConfiguration,@ComponentScan三个注解的合并,所以可以不需要@Configuration
4.方法返回值是MultipartConfigElement类型,表示所要配置的目标的元素
@Bean public MultipartConfigElement getMultipartConfigElement() { //1.创建一个配置的工厂类对象 MultipartConfigFactory factory = new MultipartConfigFactory(); //2.设置需要创建的对象的相关信息 factory.setMaxFileSize(DataSize.of(10, DataUnit.MEGABYTES)); factory.setMaxRequestSize(DataSize.of(15,DataUnit.MEGABYTES)); //3.通过工厂类创建MultipartConfigElement对象 return factory.createMultipartConfig(); }
3.头像回显
在页面中通过ajax请求来提交文件,提交完成后返回了json串,解析出json串中的data数据设置到img标签的src属性上
1.删掉在upload.html的上传头像的表单中加的三个属性:action=“/users/change_avatar”,method=“post”,enctype=“multipart/form-data”.加上id属性:id=“form-change-avatar”
2.把153行的input标签里面的type="submit"改为type=“button”(因为submit按钮不能添加事件,所以要改为普通的按钮)并加上属性id=“btn-change-avatar”
1.serialize():可以将表单数据自动拼接成key=value的结构提交给服务器,一般提交的是普通的控件类型中的数据(type=text/password/radio/checkbox等等)
2.FormData类:将表单中数据保持原有的结构进行数据提交.文件类型的数据可以使用FormData对象进行存储
使用方法:new FormData($(“form”)[0]);
这行代码的含义是将id="form"的表单的第一个元素的整体值作为创建FormData对象的数据
3.虽然我们把文件的数据保护下来了,但是ajax默认处理数据时按照字符串的形式进行处理,以及默认会采用字符串的形式进行数据提交.手动关闭这两个功能:
processData: false,//处理数据的形式,关闭处理数据
contentType: false,//提交数据的形式,关闭默认提交数据的形式
提交表单的代码
<script> $("#btn-change-avatar").click(function () { $.ajax({ url: "/users/change_avatar", type: "POST", data: new FormData($("#form-change-avatar")[0]), processData: false,//处理数据的形式,关闭处理数据 contentType: false,//提交数据的形式,关闭默认提交数据的形式 dataType: "JSON", success: function (json) { if (json.state == 200) { alert("头像修改成功") //将服务器端返回的头像地址设置到img标签的src属性上 //attr(属性,属性值)用来给某个属性设值 $("#img-avatar").attr("src",json.data); } else { alert("头像修改失败") } }, error: function (xhr) { alert("修改头像时产生未知的异常!"+xhr.message); } }); }); </script>
4.登录后显示头像
将头像上传后会显示头像,但是关闭浏览器后再进入个人头像页面就不会显示头像了,因为只有点击"上传"才能发送ajax请求并显示头像.
可以在每次用户登录成功后将avatar保存在cookie中,登录的业务层返回给控制层user对象,该对象包含uid,username,avatar.所以要在登录页面login.html中将服务器返回的头像路径设置到cookie中,然后每次检测到用户打开上传头像页面,在这个页面中通过ready()方法来自动读取cookie中头像路径并设到src属性上。
1.需要在login.html页面头部导入cookie.js文件
<script src="../bootstrap3/js/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
2.调用cookie方法保存路径
$.cookie(key,value,time);//time单位:天
在ajax请求原有的代码上加$.cookie(“avatar”,json.data.avatar,{expires: 7});
success: function (json) { if (json.state == 200) { location.href = "index.html"; $.cookie("avatar",json.data.avatar,{expires: 7}); } else { alert("登录失败") } },
3.需要在upload.html获取cookie中的值,所以要在页面头部导入cookie.js文件
<script src="../bootstrap3/js/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
4.在upload.html的script标签中加ready()自动读取cookie数据
$(document).ready(function(){ var avatar = $.cookie("avatar"); console.log(avatar);//调试用 $("#img-avatar").attr("src",avatar); })
5.显示最新头像
上传头像后不重新登录而是浏览其他页面,然后再进入个人头像页面时展示的头像是上次上传的,因为此时cookie中的值是上次上传的头像的路径,所以需要上传头像后使用同名覆盖更改cookie中路径
在ajax函数的success属性值的if语句加:
$.cookie("avatar",json.data,{expires: 7});
后记
👉👉💕💕美好的一天,到此结束,下次继续努力!欲知后续,请看下回分解,写作不易,感谢大家的支持!! 🌹🌹🌹