3.用户上传头像

还是三层架构,首先考虑数据访问层,这一层没有什么处理,因为是把头像存到硬盘里没有存到数据库里;业务层需要就是上传完头像后更新headurl,服务端就需要提供一个改变头像路径的功能;上传文件这个事就在controller表现层里实现就好了。因为啊MultipartFile是属于表现层的一个对象,要是传给了service就产生了耦合了,不太合适。

 

首先上传头像得有一个存储头像的路径,这个路径不能是固定的,因为在本地开发和部署到服务器肯定不一样,目前存到本地,后期也会存到云服务器上。在application.properties里配上头像上传路径。

1. 大体思路

①用户点击首页面【账号设置】按钮,getSettingPage()会返回静态资源【/site/setting】,进入到设置页面,执行UserController的控制器方法;

②我们点击【上传头像】按钮后,发送【/user/upload】,执行UserController的控制器方法uploadHeader():首先对空值进行处理,然后用substring分割出文件后缀,png或者jpg等等。如果没有后缀就提示文件格式不正确。对用户上传的图片重命名,用之前写的生成uuid的方法加上分割出来的文件后缀。将文件存储到我们在配置文件中设置的路径下,并更新当前user的headerUrl属性为指定格式的路径;

③当我们需要访问头像(即user的headerUrl属性)时,控制器方法getHeader()会根据headerUrl,将对应目录下的头像复制出来。

2. 用户控制器-上传头像

这里用到的是Spring MVC的multipartFile,头像的存储和获取直接在controller层操作。新建一个UserController。将类的访问路径设为/user。

转载:初步理解MultipartFile - 简书 (jianshu.com)

MultipartFile是SpringMVC提供简化上传操作的工具类。

在不使用框架之前,都是使用原生的HttpServletRequest来接收上传的数据,文件是以二进制流传递到后端的,然后需要我们自己转换为File类。使用了MultipartFile工具类之后,我们对文件上传的操作就简便许多了。

MultipartFile主要是用表单的形式进行文件上传,在接收到文件时,可以获取文件的相关属性,比如文件名、文件大小、文件类型等等。

  • 第一个方法,用于返回个人设置页面,直接返回模板路径。
  • 然后上传头像的方法,这里从容器获取两个对象,一个是MultiparFile,也就是从浏览器传过来的头像文件,一个是model,用于模型返回信息。
  • 首先对空值进行处理,然后用substring分割出文件后缀,png或者jpg等等。如果没有后缀就提示文件格式不正确。对用户上传的图片重命名,用之前写的生成uuid的方法加上分割出来的文件后缀。
  • 再在我们指定的文件存放位置新建一个文件,文件名使用生成的名字,并记录异常,将异常向上抛出,用于之后的处理。然后从hostHolder里获取当前用户,更新头像路径。
package com.nowcoder.mycommunity.controller;@Controller
@RequestMapping("/user")
public class UserController {private  static final Logger logger = LoggerFactory.getLogger(UserController.class);//注入文件的上传路径@Value("${community.path.upload}")private String uploadPath;//注入域名@Value("${mycommunity.path.domin}")private String domain;//访问路径@Value("${server.servlet.context-path}")private String contextPath;@Autowiredprivate UserService userService;@Autowiredprivate HostHolder hostHolder;//进入账号设置@RequestMapping(path="/setting",method = RequestMethod.GET)public String getSettingPage(){return "/site/setting";}//上传头像@RequestMapping(path = "/upload", method = RequestMethod.POST)public String uploadHeader(MultipartFile headerImage, Model model){//如果没上传头像,就点击上传头像按钮if(headerImage == null){model.addAttribute("error","您还没有选择图片!");return "/site/setting";}//获取图片后缀名String fileName = headerImage.getOriginalFilename();String suffix = fileName.substring(fileName.lastIndexOf("."));if(StringUtils.isBlank(suffix)){    //如果后缀名为空model.addAttribute("error","文件格式不正确!");return "/site/setting";}//生成随机的文件名fileName = CommunityUtil.generateUUID() + suffix;File dest = new File(uploadPath + "/" + fileName);try {headerImage.transferTo(dest);} catch (IOException e) {logger.error("上传文件失败:" + e.getMessage());throw new RuntimeException("上传文件失败,服务器发生异常!", e);}//到此就可以正常进行了//更新当前用户头像的路径(Web访问路径)//格式:http://localhost:8080/community/user/header/xxx.pngUser user = hostHolder.getUser();String headerUrl = domain + contextPath + "/user/header/" + fileName;userService.updateHeader(user.getId(), headerUrl);return "redirect:/index";}//获取头像(和上面头像设置时的路径格式保持一致)@RequestMapping(path = "/header/{fileName}", method = RequestMethod.GET)public void getHeader(@PathVariable("fileName") String fileName, HttpServletResponse response){//服务器存放路径fileName = uploadPath + "/" + fileName;//文件后缀String suffix = fileName.substring(fileName.lastIndexOf("."));//响应图片(浏览器响应图片时,为此写法)response.setContentType("image/" + suffix);//获取字节流try (//此为java7写法,这里面声明的变量会自动加finally,在里面自动关闭//而输出流会被SpringMVC自动关闭FileInputStream fis = new FileInputStream(fileName);OutputStream os = response.getOutputStream();){byte[] buffer = new byte[1024];int b = 0;while((b = fis.read(buffer)) != -1){os.write(buffer, 0, b);}} catch (IOException e) {e.printStackTrace();}}
}

3. 更新用户头像方法

在UserService类中添加方法

还是从dao层向controller开发,由于头像直接存在本地,没有存到数据库,这里不涉及dao层。

service层主要处理user表里的headUrl,这个方法在userMapper里写过,直接调用就可以。

    //更新用户头像public int updateHeader(int userId, String headurl){return userMapper.updateHeader(userId, headurl);}

4. 配置文件

添加文件的上传存储路径。

# 上传资源存放的位置
community.path.upload=e:/nowcoder/data/upload

5. html

①首页index.html:进入【账号设置】。

<div class="dropdown-menu" aria-labelledby="navbarDropdown"><a class="dropdown-item text-center" href="site/profile.html">个人主页</a><a class="dropdown-item text-center" th:href="@{/user/setting}">账号设置</a><a class="dropdown-item text-center" th:href="@{/logout}">退出登录</a><div class="dropdown-divider"></div><span class="dropdown-item text-center text-secondary" th:utext="${loginUser.username}">nowcoder</span>
</div>


②账号设置页面setting.html:上传头像

  <!-- 上传头像 --><h6 class="text-left text-info border-bottom pb-2">上传头像</h6><form class="mt-5" method="post" enctype="multipart/form-data" th:action="@{/user/upload}"><div class="form-group row mt-4"><label for="head-image" class="col-sm-2 col-form-label text-right">选择头像:</label><div class="col-sm-10"><div class="custom-file"><!-- name需要与控制器方法中形参名相同 --><input type="file" th:class="|custom-file-input ${error!=null?'is-invalid':''}|"id="head-image" name="headerImage" lang="es" required=""><label class="custom-file-label" for="head-image" data-browse="文件">选择一张图片</label><div class="invalid-feedback" th:text="${error}">该账号不存在!</div></div></div></div><div class="form-group row mt-4"><div class="col-sm-2"></div><div class="col-sm-10 text-center"><button type="submit" class="btn btn-info text-white form-control">立即上传</button></div></div></form

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/49556.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

个人资料上传头像模块,拍照+图库+图片剪裁+圆形头像

先看效果图: 注意: 因为模拟器的原因裁剪图片的页面只能拖拽,实际在手机上是可以放大旋转等操作的 实现思路: 1.三个自定义的view,分别是圆形的Imageview,可拖拽放大旋转的Imageview,裁剪图片的view(裁剪页面的矩形) 2.点击主界面的上传头像,开启一个透明的透明的Activity,在…

vant 列表组件:App我的、个人中心(含头像、手机号、用户名、点击交互)

案例截图&#xff1a; <template> <div class"app-container"><!-- 导类栏 --><van-nav-bartitle"我的"left-arrowclick-left"$router.back()"/><!-- 我的 --><div class"wii-user-head"><!--…

Android开发之用户头像上传

一&#xff0c;概述 本篇博客总结一下自己在开发过程中应用到的一些知识&#xff0c;在本篇博客中带领大家完成用户头像选择或者拍照上传&#xff0c;并对图片进行大小的压缩&#xff0c;和形状的控制&#xff0c;可以将用户选择到的图片裁剪成圆形上传。 ok&#xff0c;我们开…

X站全称是什么_考不上高中上什么专业

商洛考不上高中上什么好处 高职和大专区别是什么&#xff1f;高职不如大专吗&#xff1f;高职毕业是否可以续读本科&#xff1f;高职毕业只能做工人吗&#xff1f;高职和大专的主要区别在分为学习内容上的不同以及表达内容等方面的不同&#xff0c;但是本质上并没有区别&#x…

一文搞清到底什么是 .NET?

现在各种 .NET 满天飞&#xff0c;别说新手了&#xff0c;连我这样的老手都差点被绕进去。到底什么是 .NET 呢&#xff1f;《通俗易懂&#xff0c;什么是.NET?什么是.NET Framework&#xff1f;什么是.NET Core? 》这篇文章好长呀&#xff0c;不知道你看完了没有&#xff0c;…

中台,都他妈被你们说糊涂了,文内才是正宗解释,别摸石头过河了,石头早就有了...

&#xff08;1&#xff09;我们先说说技术架构分层 我们按技术架构通常是这样的&#xff1a; 1、UI交互层&#xff1a;Windows UI、PC Web UI、移动App UI、微信小程序UI、摄像头视觉识别人机界面、语音交互人机界面 2、逻辑层&#xff1a;面向对象技术/组件技术/SOA服务中间件…

Vue与React不是真正的响应式编程,Svelte才是正宗

这个题目可能有点夸张&#xff0c;但不管怎样 Svelte 和它的理念就是这样的。如果你还没听说过 Svelte 的话就去了解一下吧——你会见证一场革命的&#xff0c;它将取得空前的成就&#xff08;没有给 Svelte 团队增加压力的意思&#xff09;。 本文不是 Svelte 的入门教程。Sv…

mysql是怎样运行的 从根儿 百度云_读书笔记-MySQL 是怎样运行的:从根儿上理解 MySQL...

mysqld_safe mysqld_safe是一个启动脚本&#xff0c;它会间接的调用mysqld&#xff0c;而且还顺便启动了另外一个监控进程&#xff0c;这个监控进程在服务器进程挂了的时候&#xff0c;可以帮助重启 它。另外&#xff0c;使用mysqld_safe启动服务器程序时&#xff0c;它会将服务…

MariaDB: 谁是更为正宗的MYSQL

随着Oracle买下Sun&#xff0c;MySQL也落入了关系型数据库王者之手。而早在2009年&#xff0c;考虑到Oracle的名声以及其入手之后闭源的可能性&#xff0c;MySQL之父的Michael便先行一步&#xff0c;以他女儿Maria的名字开始了MySQL的另外一个衍生版本&#xff1a;MariaDB。 Mi…

区块链入门教程

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 区块链&#xff08;blockchain&#xff09;是眼下的大热门&#xff0c;新闻媒体大量报道&#xff0c;宣称它将创造未来。 可是&#xf…

真的会谢,ChatGpt能不能靠谱点

我想让GPT帮我生成一个可以实现一根绳子抖动的效果。 一直沟通&#xff1a; 然后它给我生成了一段还是达不到效果的代码&#xff0c;并且代码还不全&#xff01; 本来我想要这种&#xff1a;TweenMax结合elastic-progress的弹性进度条动画 但是ChatGPT给我的代码最后效果是&a…

本科计算机论文致谢词,有关本科毕业的论文致谢词范文

有关本科毕业的论文致谢词范文 本科毕业论文致谢范例一 时间如梭,转眼毕业在即。回想在大学求学的四年,心中充满无限感激和留恋之情。感谢母校为我们提供的良好学习环境,使我们能够在此专心学习,陶冶情操。谨向我的论文指导老师王副教授致以最诚挚的谢意!王老师不仅在学业上…

计算机专业毕业设计致谢,那些笑哭的毕业论文致谢

原标题&#xff1a;那些笑哭的毕业论文致谢 相比正文的废话连篇&#xff0c;冗长乏味&#xff0c;致谢完全可以成为论文的弹幕&#xff0c;专供吐槽。咱们的致谢不用非得把七大姑、八大姨都拉出来感谢一番&#xff0c;像下面这些言语上既诙谐又大胆的致谢言辞&#xff0c;小编就…

html实训报告致谢,毕业论文致谢信(精选10篇)

毕业论文致谢信(精选10篇) 大学生活将要谢下帷幕,我们都知道毕业前要通过毕业论文,毕业论文是一种有准备、有计划的检验大学学习成果的形式,那么优秀的毕业论文是什么样的呢?下面是小编为大家收集的毕业论文致谢信(精选10篇),供大家参考借鉴,希望可以帮助到有需要的朋友。…

html项目的致谢词,毕业论文致谢词范文200字(精选10篇)

毕业论文致谢词范文200字(精选10篇) 导语:大学三年学习时光已经接近尾声,在此我想对我的母校,我的父母、亲人们,我的老师和同学们表达我由衷的谢意。下面是小编整理的毕业论文致谢词范文200字,欢迎参考借鉴! 毕业论文致谢词1 首先感谢学校为作者提供了深造的机会,在四年…

中科院博士论文致谢感人,如果让AI来写又会是怎样

今天&#xff0c;达摩院发布全球最大规模的 中文文本预训练语言模型——PLUG PLUG的参数规模达270亿 它集语言理解与生成能力于一身 在小说创作、诗歌生成、 智能问答等领域表现突出 还以80.614分刷新了CLUE分类榜单纪录 排名仅次于“人类”组 今天阿云也挑了几部经典作品…

matlab论文致谢,2020大学毕业论文致谢信

2020大学毕业论文致谢信 论文致谢词的作用主要是为了表示尊重所有合作者的劳动&#xff0c;它有利于促进形成相互帮助的社会风气。下面是小编为大家精心准备的2020大学毕业论文致谢信&#xff0c;仅供大家参考阅读&#xff01; 2020大学毕业论文致谢信1 我选择了周老师的课题&a…

计算机专业毕业设计致谢,计算机毕业论文致谢范文3篇

计算机毕业论文致谢范文3篇 计算机是20世纪最先进的科学技术发明之一&#xff0c;对人类的生产活动和社会活动产生了极其重要的影响并以强大的生命力飞速发展它的应用领域从最初的军事科研应用扩展到社会的各个领域&#xff0c;已形成了规模巨大的计算机产业带动了全球范围的技…

毕业论文致谢到底要怎么写?

毕业论文论文的致谢怎么写&#xff1f; 这里的标题只是个问句&#xff0c;以下的文字并不会给出答案&#xff0c;毕竟&#xff0c;毕业论文的致谢是最难写的一部分。依我看来&#xff0c;毕业论文致谢&#xff0c;大抵分为两种&#xff0c;一种是中规中矩型&#xff0c;列一堆人…

计算机毕业论文致谢,计算机软件毕业论文致谢词

计算机软件毕业论文致谢词 致谢应以简短的文字对课题研究与论文撰写过程中间直接给予帮助的人员表示自己的谢意,这不仅是一种礼貌,也是对他人劳动的尊重,下面是小编搜集整理的计算机软件毕业论文致谢词,供大家阅读查看。 致谢一: 时间飞逝,大学的学习生活很快就要过去,在…