vant中如何修改用户的头像
更新时间:2022年8月11日 13:47 点击:415 作者:A黄俊辉A
vant修改用户的头像
我们的项目中经常会遇到用户个人信息的修改,当然用的组件就是 vant 中的 van-uploader 组件, 但是这个组的是有一个回显功能的, 它的样式不太符合我们, 更改用户头像的场景
对比一下
van-uploader 的本来的样式是这样的
而我们需要修改用户头像的样式是这样的
我们的需求就是 上传完图像之后, 再次点击头像, 还可以再次上传一个新的头像, 这样的需求, van-uploader 中的 fileList是实现不了的
那么我是怎么实现这个功能的呢?
我没有使用 van-uploader 的 fileList 属性, 我使用的它的一个 slot 的插槽功能
图中的 van-image 的src 是写死了的, 它可以通过 接口请求返回的数据来改变。会的都会,不用多说
这样就实现我们的想要的功能
vant实现纯客户端用户头像上传预览
<style lang="less" scoped> .EditUserINfo { .avatar { width: 30px; height: 30px; } /* 样式穿透 */ /deep/ .van-image-preview__cover{ /* 取消样式设置 */ top: unset; left: 0; right: 0; bottom: 0; .van-nav-bar{ background: #000; } } } </style>
<template> <div class="EditUserINfo"> <van-nav-bar title="编辑资料" left-arrow @click-left="$router.back()"></van-nav-bar> <van-cell-group> <van-cell title="头像" is-link @click="onAvatarClick"> <van-image class="avatar" round :src="user.photo" /> </van-cell> <!-- 表单元素的hidden属性:隐藏表单元素 --> <input type="file" hidden ref="file" @change="onFileChange" /> <van-cell title="昵称" is-link :value="user.name"></van-cell> <van-cell title="介绍" is-link value="内容"></van-cell> <van-cell title="性别" is-link :value="user.gender===0?'男':'女'"></van-cell> <van-cell title="生日" is-link :value="user.birthday"></van-cell> </van-cell-group> <!-- 头像预览,预览关闭文件重置 --> <van-image-preview v-model="isPreviewShow" :images="images" @close="$refs.file.value=''"> <!-- 插入插槽cover --> <van-nav-bar slot="cover" left-text="取消" right-text="确定" @click-left="isPreviewShow=false" @click-right="onUpdateAvatar" /> </van-image-preview> </div> </template> <script> export default { name: "EditUserINfo", components: {}, props: {}, data() { return { user: { photo: "https://img.yzcdn.cn/vant/cat.jpeg", name: "凯文", gender: "男", birthday: "1996-12-18" }, //用户信息 isPreviewShow: false, images: [] //预览图片列表 }; }, watch: {}, computed: { file() { return this.$refs["file"]; } }, methods: { onAvatarClick() { this.file.click(); }, onFileChange() { // 1.拿到file类型input选择的文件对象 const fileObj = this.file.files[0]; // 2.使用window.URL.createObjectURL(file)得到文件数据 const fileData = window.URL.createObjectURL(fileObj); // 3.将img.src = 第2步的结果 this.images = [fileData]; this.isPreviewShow = true; }, onUpdateAvatar() { // 1.构造包含文件数据的表单对象 // 注意:含有文件的服务务必要放到FormData中 // 用代码来构造一个表单对象,主要目的是用来异步发送文件上传 // 参数一:键 // 参数二:值 const fd = new FormData() fd.append('photo',this.file.files[0]) this.$toast.loading({ duration: 1000, message:'保存中', forbidClick:true }) this.isPreviewShow =false //this.$toast.success('保存成功') } }, created() {}, mounted() {} }; </script>
以上为个人经验,希望能给大家一个参考,也希望大家多多支持猪先飞。
原文出处:https://blog.csdn.net/hjh15827475896/article/details/1238420
相关文章
- php 获取用户IP与IE信息程序 function onlineip() { global $_SERVER; if(getenv('HTTP_CLIENT_IP')) { $onlineip = getenv('HTTP_CLIENT_IP');...2016-11-25
- 这篇文章主要介绍了使用Vant完成通知栏Notify的提示操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-11
- php简单用户登陆程序代码 这些教程很对初学者来讲是很有用的哦,这款就下面这一点点代码了哦。 <center> <p> </p> <p> </p> <form name="form1...2016-11-25
- 当来访者浏览器语言是中文就进入中文版面,国外的用户默认浏览器不是中文的就跳转英文页面。 <?php $lan = substr( $HTTP_ACCEPT_LANGUAGE,0,5); if ($lan == "zh-cn") print("<meta http-equiv='refresh' c...2015-11-08
- 这篇文章主要介绍了解决vant-UI库修改样式无效的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-03
- 【问题描述】:同一用户在同一时间多次登录如果不能检测出来,是危险的。因为,你无法知道是否有其他用户在登录你的账户。如何禁止同一用户多次登录呢? 【解决方案】 (1) 每次登录,身份认证成功后,重新产生一个session_id。 s...2015-11-24
- 这篇文章主要介绍了vant 解决tab切换插件标题样式自定义的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-14
- 一个用Javascript检测用户输入密码强度的效果代码,以下代码主要是从以下四个方面检测用户输入的密码的强度的,有兴趣的朋友可以自己添加或修改成自己想要的形式! 1. 如果输入的密码位数少于5位,那么就判定为弱。 2. 如果...2015-10-23
- 这是注册程序是一款当用户输入完用户名是,就会自动去数据库中查询用户要注册的用户名是否己经被注册了,如果是返回提示否则提示可以注册。 conn.php文件 代...2016-11-25
- 这篇文章主要介绍了详解基于Vue cli开发修改外部组件Vant默认样式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-04
- 这篇文章主要给大家介绍了关于微信小程序用户授权最佳实践的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-05-08
- 今天小编在这里就来给Painter的这一款软件的使用者们来说一下绘制卡通小丑头像效果的教程,各位想知道具体制作步骤的使用者,那么下面就快来跟着小编一起看一看制作步骤...2016-09-14
- cookie 的用途之一是存储用户在特定网站上的密码和 id。另外,也用于存储起始页的首选项。在提供个人化查看的网站上,将要求阁下的网络浏览器利用阁下计算机硬驱上的少量...2016-11-25
- 知识归纳因为MySQL是使用User和Host两个字段来确定用户身份的,这样就带来一个问题,就是一个客户端到底属于哪个host。 如果一个客户端同时匹配几个Host,对用户的确定将按照下面的优先级来排 基本观点越精确的匹配越优先...2015-11-08
- 这篇文章主要介绍了sqlserver添加sa用户和密码的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-05-07
- Vant Weapp 是移动端 Vue 组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用,这篇文章主要给大家介绍了关于微信小程序引入Vant框架的相关资料,需要的朋友可以参考下...2021-06-08
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
最近接了个项目需要开发一个app项目,由于是第一次接触这种app开发,经过一番思考,决定使用Vue3+Vant前端组件的模式进行开发,下面把问题分析及实现代码分享给大家,需要的朋友参考下吧...2021-06-10- 装完数据库清理一些默认账号的时候不小心把root删除了,flush privileges 之后的新 root 忘了grant任何权限,查看mysqld选项里面有个 −−skip-grant-tables复制代码 代码如下: #/usr/libexec/mysqld --verbos...2015-03-15
- 注册页面是大多数网站必备的页面,所以很有必要对自己的注册页面做些精心的设计。下面三张图,第一张是注册的展示页面,第二张思维导图就一个简单的逻辑,第三张是通过firebug查看调用的JS文件。 一、给每个输入框写下说明在...2015-11-24
Vant+postcss-pxtorem 实现浏览器适配功能
这篇文章主要介绍了Vant+postcss-pxtorem 实现浏览器适配,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-05