java修改头像代码_用户修改头像功能

项目中需要进行用户头像的上传,并且还有预览功能,因为我的项目用的是vue的框架,因此留下作为备份,希望有需要的人可以参考。

页面代码:

html

上传个人照片

data

imageUrl: require('./img/upload.png') // 定义imageUrl默认图片路径

js

// 打开上传功能

uploadHeadImg() {

this.$el.querySelector('.hiddenInput').click();

},

// 将头像显示

handleFile(e) {

let $target = e.target || e.srcElement

let file = $target.files\[0\]

let reader = new FileReader()

reader.onload = (data) => {

let res = data.target || data.srcElement

this.imageUrl = res.result

}

reader.readAsDataURL(file);

}

css

.upload{

cursor: pointer;

width: 170px;

text-align: center;

display: inline-block;

}

.upload p{

margin-top: 10px;

}

.hiddenInput{

display: none; // 隐藏input上传文件按钮

}

最后得出的效果是:

22b7a2f73392708343840e76eca1668b.png

9d11505c834f564504bdf9d9e3dc5833.png

10e1eefb76a64f7870eaec48296219e0.png

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

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

相关文章

实现Android中更换头像功能

本文转载自:http://blog.csdn.net/melodev/article/details/51477369 写在前面: 更换头像这个功能在用户界面几乎是100%出现的。通过拍摄照片或者调用图库中的图片,并且进行剪裁,来进行头像的设置。 功能相关截图如下: 下面我…

PHP 针对多用户 实现头像更换

成品图思路登陆页面 表单制作验证码制作JavaScript刷新验证码 验证页面 验证逻辑页面跳转 header函数Meta标签JavaScript 上传页面 个人主页上传核心 最终结果 登陆页面验证结果个人主页最新头像 总结 一个网站,其实说白了就是某几个特定功能的组合,而…

头像修改功能的实现

头像修改功能的实现 介绍 本文编写了前端和后端,一起实现了上传图片同步显示并且通过后端保存图片到本地目录。前端修改图片按钮样式 功能实现:首先设置原本的文件选择器不显示,也就是display:none;然后写下图片img标…

5分钟实现Android中更换头像功能

5分钟实现Android中更换头像功能 本文原创,转载请经过本人准许 写在前面: 更换头像这个功能在用户界面几乎是100%出现的。通过拍摄照片或者调用图库中的图片,并且进行剪裁,来进行头像的设置。 功能相关截图如下: 下面…

点击头像选择图片更换头像

效果图如下所示(视频再转格式的时候被挤变形了一点&#xff0c;各位童鞋将就一下&#xff0c;嘻嘻)&#xff1a; 关键代码&#xff08;html&#xff09;&#xff1a; <span class"headerSpan"><img class"headerImg" :src"headerUrl"&g…

chatgpt赋能python:Python图标为什么会变成白色?

Python图标为什么会变成白色&#xff1f; 最近&#xff0c;你可能已经注意到了一个很奇怪的现象&#xff0c;Python官网上的ICON图标变成了白色。对于许多Python用户来说&#xff0c;这个变化似乎令人困惑甚至恼火。今天&#xff0c;我们来了解一下这个问题的原因&#xff0c;…

FinChat - 金融行业的合规即时通讯工具

对于金融行业而言&#xff0c;不论是企业微信还是钉钉&#xff0c;都不是最佳的选择&#xff0c;这等同于把数据的控制权交给阿里腾讯。金融机构对数据非常敏感&#xff0c;对数据的安全、合规、保密、留痕的要求也远远超过其他行业。数据就是的数字时代的金矿&#xff0c;是金…

python简易语音助手

先上图 本程序使用的软件&#xff1a; PyCharm&#xff0c;Designer&#xff08;PyQt5界面编辑软件&#xff09; 步骤 1.使用designer绘制出程序界面的图,新建文件选择main windows 使用的控件&#xff1a; 按键 文本框 Line Edit 过程条 Priogress Bar 这里是装饰的一个作…

使用小爱同学语音控制电脑关机 - Winform C#

使用小爱同学语音控制电脑变关机 前言实现原理准备注册巴法云账号接入巴法云接入米家 编写程序连接TCP接收信息并运行关机指令发送指令订阅主题添加心跳机制后台运行阻止默认关闭窗口事件 完整代码 前言 小爱同学应该已经是家喻户晓的了&#xff0c;现在一直用来控制家里的家电…

用Kotlin开发智能语音助手,打造一款“懂你”的对话精灵

简介 Hi&#xff0c;各位同学大家好&#xff0c;我有新课上线啦&#xff0c;距离上一门课程已经过去九个月了&#xff0c;这门课的知识点是以Kotlin为主的&#xff0c;自Kotlin被Google转正之后&#xff0c;这门语言就备受我们Android开发者的关注&#xff0c;经过几年的发展下…

用Python程序实现语音识别就是这么简单!​

前言 Python程序提供了其他技术无法比拟的交互性和可访问性&#xff0c;重要的是&#xff0c;在 Python 程序中实现语音识别非常简单。我们一起来了解python程序的&#xff1a;语音识别的工作原理、PyPI 支持哪些软件包以及如何安装和使用 SpeechRecognition 软件包&#xff0…

树莓派小爱同学、天猫精灵、智能音箱、百度语音极速版、百度语音标准版、语音识别、语音合成终极方案

第一句话&#xff0c;python2版本的代码&#xff0c;python3你改改就完事了 流程图如下&#xff1a; 全套教程下载地址点击下载 首先需要调用这个方法安装百度的语音识别 https://ai.baidu.com/ai-doc/SPEECH/Bk4o0bmt3 安装使用Python SDK有如下方式&#xff1a; 如果已安…

uniapp开发微信小程序实现语音识别,使用微信同声传译插件,

第一步&#xff1a;在微信小程序管理后台&#xff1a;“设置”-》“第三方设置”-》“插件管理”中添加插件。 但是这个地方&#xff0c;没有搜索到插件&#xff0c;就到微信服务市场 搜索到以后添加到需要的小程序里面&#xff0c;然后返回管理中心查看&#xff0c;就可以看…

小白也可以学会小爱同学语言控制灯

教程 软件准备 电脑端安装Arduino软件&#xff0c;手机端安装点灯科技APP&#xff0c;以及米家APP和小爱音响。 电脑端所需以及点灯科技APP都在在网盘资料文件夹中&#xff0c;需要网盘资源的评论区找我要。 硬件准备 小爱音响一个 ESP8266模块一个 舵机一个 硬件连接 …

基于Blinker的小爱同学语音控制【脱坑指南】

基于Blinker的小爱同学语音控制ESP8266 前些天在使用esp8266时遇到很多小爱不能控制设备问题&#xff0c;现在来叙述我控制过程中所遇到的问题&#xff0c;以及到完整的小爱能成功控制Esp8266的过程。 1.需要先安装8266_package_2.7.4.exe,不然不能够正确使用&#xff0c;相关…

国产开源版「ChatGPT插件系统」来了!豆瓣、搜索一应俱全,清华、面壁智能等联合发布...

视学算法报道 编辑&#xff1a;好困 【导读】近期&#xff0c;面壁智能联合来自清华、人大、腾讯的研究人员共同发布了中文领域首个基于交互式网页搜索的问答开源模型WebCPM&#xff0c;这一创举填补了国产大模型该领域的空白。面壁智能自研工具学习引擎BMTools也因此被成功实…

多快好省的多样算力,让下一代互联网如你所愿

从前段时间让所有人刮目相看的AI绘画&#xff0c;到最近火爆全网的CharGPT&#xff0c;2022年的互联网行业为我们贡献了无数新鲜点子和妙哉的应用&#xff0c;始终令人回味无穷。回首这一年&#xff0c;我们好像并没有见证新的“杀手级”应用诞生&#xff1b;但仔细回味&#x…

泰坦号内爆5位富豪遇难!AI复原最后恐怖瞬间,设计缺陷真相公开

转自&#xff1a;新智元 30美元游戏手柄可操控潜水器&#xff1f;一系列巨大设计缺陷&#xff0c;注定了5位富人「泰坦尼克号」残骸之旅是一场生命的豪赌。 失踪4天&#xff0c;深海「泰坦号」潜水器竟灾难性内爆。 5位乘员全部遇难&#xff01; 与爆炸不同&#xff0c;内爆是一…

独家 | 100位特邀用户亲测GPT-4,带来超预期体验!

GPT-4.0作为近年来自然语言处理领域的一项重要突破&#xff0c;备受人们关注和期待。为了助力用户全面理解和高效使用该技术&#xff0c;Beezy团队迅速实现GPT-4.0 API对接&#xff0c;并推出GPT-4.0免费体验官计划。 近期&#xff0c;首期体验官活动完美结束&#xff0c;Beez…

【大模型】创新工场AI工程院执行院长:后GPT时代,多模态是最大的机会

目录 核心观点 大语言模型的“垄断”与“白菜化” 多模态AI的广阔天地