用户头像上传_头像使用

用户头像上传_头像使用上传头像上传头像-持久层SQL语句的规划将对应文件保存在操作系统上,然后在把这个文件路径给记录,因为记录路径是非常便捷和方便,将来如果要打开这个文件可以依据这个路径去找到这个文件。在数据库中需要保存这个文件的路径即可。将所有的静态资源(图片、文件、其他资源文件)方法某台电脑上,在把这台电脑作为一台单独的服务器使用。对应是一个更新用户avatar字段的sql语句。updatet_usersetavatar=?,modified_user=?,modified=?whereuid=?设

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

上传头像


上传头像-持久层

SQL语句的规划

将对应文件保存在操作系统上,然后在把这个文件路径给记录,因为记录路径是非常便捷和方便,将来如果要打开这个文件可以依据这个路径去找到这个文件。在数据库中需要保存这个文件的路径即可。将所有的静态资源(图片、文件、其他资源文件)方法某台电脑上,在把这台电脑作为一台单独的服务器使用。

对应是一个更新用户avatar字段的sql语句。

update t_user set avatar=?,modified_user=?,modified=? where uid=?

Jetbrains全家桶1年46,售后保障稳定

设计接口和抽象方法

UserMapper接口中来定义抽象方法用于修改用户的头像。

/** * @Param("SQL映射文件中#{}占位符的变量名"): 解决的问题,当SQL语句的占位符和映射的接口方法参数名不一致时, * 需要将某一个参数强行注入到某一个占位符变量上时,可以使用@Param这个注解来标注映射的关系 * 根据用户id来修改用户头像 * @param uid * @param avatar * @param modifiedUser * @param modifiedTime * @return */
    Integer uptateAvatarByUid(@Param("uid") Integer uid,
                              @Param("avatar") String avatar,
                              @Param("modifiedUser") String modifiedUser,
                              @Param("modifiedTime") Date modifiedTime);


}

接口的映射

UserMapper.xml文件中编写映射的SQL语句。

  <update id="updateAvatarByUid">
        UPDATE t_user SET
        avatar=#{avatar},
        modified_user = #{modifiedUser},
        modified_time = #{modifiedTime}
        WHERE uid = #{uid}
    </update>

在测试类编写测试方法

@Test
public void updateAvatarByUid(){ 
   
    userMapper.updateAvatarByUid(7,"/web/load.png","系统管理员",new Date());
};

上传头像-业务层

规划异常

1.用户数据不存在,找不到对应用户的数据。(无需重复开发)

2.在更新的时候,有可能会有各种未知的异常产生。(无需重复开发)

设计接口和抽象方法

/** * 修改用户的头像 * @param uid 用户的id * @param avatar 用户的头像 * @param username */
void changeAvatar(Integer uid, String avatar, String username);

实现抽象方法

编写业务层的更新用户头像的方法。

 @Override
    public void changeAvatar(Integer uid, String avatar, String username) { 
   
        //判断用户是否为空
        User result = userMapper.findByUid(uid);
        if(result==null || result.getIsDelete()==0){ 
   
            throw new UserNotFoundException("用户不存在");
        }
        Integer rows = userMapper.updateAvatarByUid(uid, avatar, username, new Date());
        if(rows != 1){ 
   
            throw new UpdateException("用户更新头像时产生了未知的异常");
        }
    }

测试业务层方法的执行。

 @Test
    public void changeAvatar(){ 
   
        userService.changeAvatar(7,"/aaa/aaa.png","系统管理员");
    }

上传头像-控制层

规划异常

图片传到控制层可能会发生的异常
文件异常的父类
FileuploadException 泛指文件上传的异常(父类)继承RuntimeException

父类是:FileuploadException
FileEmptyException 文件为空的异常
FileSizeException 文件大小超出限制
FileTypeException 文件类型异常
FileUploadIOException 文件读写的异常
五个构造方法显示的声明出来,再去继承相关的父类。

在异常统一处理方法的参数列表上增加新的异常处理作为它的参数

@ExceptionHandler({ 
   ServiceException.class,FileUploadException.class})

设计请求

/users/change_avatar
POST(get请求提交数据2kb)
HttpSession session,MutipartFile file
JsonResult

实现请求

/** * MutipartFile接口是SpringMVC提供的一个接口,这个接口为我们包装了获取文件类型的数据(任何类型的file都可以接收), * SpringBoot有整合SpringMVC,只需要在处理请求的方法参数列表声明一个参数类型为MutipartFile的参数,然后SpringBoot * 自动将传递给服务的文件数据赋值给这个参数 * * @RequestParam 表示请求中的参数,将请求中的参数注入请求处理方法的某一个参数上, * 如果名称不一致则可以使用@RequestParam注解进行标记和映射 * @param session * @param file * @return */
@RequestMapping("update_avatar")
public JsonResult<String> changeAvatar(HttpSession session, @RequestParam("file") MultipartFile file){ 

//判断文件是否为空
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
String parent = session.getServletContext().getRealPath("upload");
//File对象指向路径,可以判断file是否存在
File dir = new File(parent);
if(!dir.exists()){ 
//检测目录是否存在
dir.mkdirs();//没有就创建目录
}
//获取到文件的名称,UUID工具来生成一个新的字符串作为文件名
//例如:avatar01.png
String originalFilename = file.getOriginalFilename();
System.out.println("originalFilename = " +originalFilename);
int index = originalFilename.lastIndexOf(".");
String suffix = originalFilename.substring(index);
String filename = UUID.randomUUID().toString().toUpperCase() + suffix;
File dest = new File(dir,filename);//空文件
//参数file中的数据写到空文件(dest)中
try { 

file.transferTo(dest);//把file文件中的数据写入到dest文件中(后缀要一致)
}catch(FileStateException e){ 

throw new FileStateException("文件状态异常");
} catch (IOException e) { 

throw new FileUploadIOException("文件读写异常");
}
Integer uid = getUidFromSession(session);
String username = getUsernameFromSession(session);
//返回的头像路径 /upload/test.png
String avatar = "/upload" + filename;
userService.changeAvatar(uid,"avatar",username);
//返回用户头像的路径给前端,将来用于头像的展示使用
return new JsonResult<>(OK,avatar);
}

上传头像-前端页面

在upload页面编写上传头像的代码(说明:如果直接使用表单进行文件的上传,需要给表单显示的添加一个属性enctype=”multipart/form-data”声明出来,不会将目标文件的数据结构做修改在上传,不同字符串。)

解决Bug

更改默认的大小限制

SpringMVC默认为1MB文件可以进行上传,手动的去修改SpringMVC默认上传的大小。
方式1:直接可以在配置文件中进行配置:

spring.servlet.multipart.max-file-size=10MB
spring.servlet.multipart.max-request-size=15MB

方式2:需要再用java代码的形式来设置文件的上传大小限制。主类中进行配置,可以定义一个方法,必须使用@Bean修饰来修饰。在类的前面添加一个@Configration注解进行修饰类。MutipartConfigElement类型。

@Configuration //表示配置类
@SpringBootApplication
// MapperScan注解指定当前项目中的Mapper接口路径的位置,在项目启动的时候会自动加载所有接口
@MapperScan("com.cy.store.mapper")
public class StoreApplication { 

public static void main(String[] args) { 

SpringApplication.run(StoreApplication.class, args);
}
@Bean
public MultipartConfigElement getMultipartConfigElement(){ 

//创建一个配置工厂类的对象
MultipartConfigFactory factory = new MultipartConfigFactory();
//设置需要创建对象的相关信息
factory.setMaxFileSize(DataSize.of(10, DataUnit.MEGABYTES));
factory.setMaxRequestSize(DataSize.of(15,DataUnit.MEGABYTES));
//通过工厂类来创建MultipartConfigElement对象
return factory.createMultipartConfig();
}
}

显示头像

在页面通过ajax请求来提交文件,提交完成后返回了json串,解析出data中的数据,设置到img头像标签的src属性就可以了。
* serialize():可以将表单数据数据自动拼接成key=value的结构进行提交给服务器,一般提交普通的控件类型中的数据(text\password\radio\checkbox) 等等
* FormData类:将表单中的数据保持原有的结构进行数据的条件。
new FormData($(“#form”)[0]);//文件类型的数据可以使用FormData对象进行存储
* ajax默认处理数据时按照字符串的形式进行处理,以及默认会采用字符串的形式进行提交数据。关闭这两个默认的功能。

processData:false, //处理数据的形式,关闭处理数据
contentType:false, //提交数据的形式,关闭默认提交数据的形式

登录后显示头像

可以在更新头像成功后,将服务器返回的头像路径保存在客户端cookie对象,然后每次检测到用户上传头像页面,在这个页面中通过ready()方法来自动检测去读取cookie中头像并设到src属性上。

1.设置cookie中的值:
导入cookie.js文件

<script src="../bootstrap3/js/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>

调用cookie方法:

$.cookie(key,value,time); // 单位:天

2.在upload.html页面先引入cookie.js文件

<script src="../bootstrap3/js/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>

3.在upload.html页面通过ready()自动读取cookie中的数据。

$(document).ready(function () { 

let avatar = $.cookie("avatar");
//将cookie中的值获取出来设置到头像的src属性上
$("#img-avatar").attr("src",avatar);
});

4.显示最新的头像
在更改完头像后,将新的头像地址,在一次保存在cookie中,同名保存会覆盖cookie中的值。

//将头像保存在cookie中
```javascript
$.cookie("avatar",json.data,{ 
expires :7})
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/210065.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Hadoop3.3.0安装与使用

    Hadoop3.3.0安装与使用

  • qt realease版本运行错误(qt发布release版本)

    1、在QtCreator下用release跑一遍程序,生成相应的EXE文件;2、在QtCreator下编译好的release下的ImageProcesser.exe拷贝到一个文件夹下面;3、在 ImageProcesser.exe文件路径下,输入cmd可弹出命令行窗口;4、在命令行模式下输入windeployqtImageProcessor.exe,按下回车键后会将…

  • 举例说明随机函数的应用python_Python生成50个随机数

    举例说明随机函数的应用python_Python生成50个随机数摘要:下文讲述Python代码中seed()函数的简介说明,如下所示:seed()函数功能用于改变随机数生成器的种子,常用于其它随机函数之前运行此函数seed()函数语法seed.seed([x])———参数说明—-x:任意数字———返回值说明—-无返回值seed()函数注意事项:1.使用seed()函数需引入包random(importrandom)2.设置随…

  • 基于 SpringBoot + Vue 的商城系统附带小程序源码

    简介 又一个小商场系统,Spring Boot后端 + Vue管理员前端 + 微信小程序用户前端 + Vue用户移动端。 项目架构 技术栈 Spring Boo…

  • ftp服务器文件防盗链,IIS防盗链组件[通俗易懂]

    ftp服务器文件防盗链,IIS防盗链组件[通俗易懂]一个用于防盗链和限制IIS连接线程的组件,需要IIS用ISAPI的方式加载组件,在2003服务器上测试2008服务器的话需要安装ISAPI扩展。相关软件软件大小版本说明下载地址一个用于防盗链和限制IIS连接线程的组件。本组件已经应用于PC6下载服务器,经过一段时间的测试效果比较明显。需要IIS用ISAPI的方式加载组件,在2003服务器上测试2008服务器的话需要安装ISAPI扩展。打开IIS…

  • scratch编程小游戏黑白棋

    scratch编程小游戏黑白棋你有没有玩过一种游戏,就是按3X3排列的方块,方块中有黑有白,当你按下一个后周围的黑块会变成白块,白块变黑块,当全部的方块都变成白色是就赢了,今天我们就来编写这个游戏!首先来看看效果:知道怎么玩了吗?现在就来看看是怎么编写的吧!首先画出所有的角色:方块要画出一黑一白:方块首先要移动到合适的位置,然根据探测器来切换黑白:方块1:方块2:方块3:方块4:方块5:方块6:方块7:方块8:方块9:现在是最最最最重要的探测器程序了,探测器决定了布局的结果,保证不会

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号