Vue项目中个人中心头像的上传方法

我们实现的时点击头像栏这一整行都可以更换头像这个功能。
我们需要使用vant组件库中的Uploader文件上传组件。
即：

<van-uploader :after-read="afterRead" />

将这个代码复制到我们的代码中。
注意此处的uploader组件需要和edit banner组件同级。

<div class="uploadfile"><div class="uploadimg"><van-uploader preview-size="100vw" :after-read="afterRead" /></div><edit-banner left="头像"><img :src="model.user_img" slot="right" alt="" v-if="model.user_img" /><img src="@/assets/default_img.jpg" slot="right" alt="" v-else /></edit-banner></div>

将van-uploader preview-size属性设置为100vw，也就是铺满整个屏幕。对整个父级设置overflow: hidden;透明度设置为0。并且将uploadfile和uploadimg设置为父级相对定位，子级决定定位的样式使之脱离标准文档流。即如下所示：

<style lang="less">
.editViews img {height: 12.778vw;width: 12.778vw;
}
.uploadfile {overflow: hidden;position: relative;.uploadimg {opacity: 0;position: absolute;}
}
</style>

点击头像栏这一整行都可以更换头像。

Vue项目中个人中心头像的上传方法相关推荐

webuploader html5,在Vue项目中使用WebUploader实现文件上传
简介: WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流 ...
vue 微信公众号支付接口_总结vue项目中使用微信公众号支付的方法
本篇文章给大家带来的内容是总结vue项目中使用微信公众号支付的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 微信公众号支付 1. 使用jssdk调用微信支付,具体查看开发文档 ...
vue项目中 img标签加载失败(404)方法，@error事件
vue项目中 img标签加载失败方法,@error事件 @error="defImg" <img src="123" @error="defIm ...
vue项目引入富文本编辑，图片上传/视频上传
1:下载富文本和更改图片大小 npm install quill-image-resize-module --save//更改img图片大小 npm install vue-quill-editor ...
Vue项目中用户的头像展示
效果展示: element中已经有对应的组件了,直接封装成公用的组件使用即可在@/components/UploadImage/index.vue(注意我们要自定义上传,并上传到第三方服务器中,所以 ...
在项目中使用 Discuz!NT的上传头像功能
大概半年前,由于某个网站项目需要整合Discuz!NT,就粗略的用了一下.觉得里面的会员上传头像功能方便好用,而且支持摄像头,就把它的代码分离出来,以后用在需要的地方. 用过Discuz!NT的朋友会 ...
vue 项目中引用并使用cdn上面的js文件
项目中,有一份配置数据需要不停地文件更新,之前放在项目中每次更新就要进行发版本,所以就把它放在cdn上,项目中通过cdn地址获取文件,每次需要更新数据时,直接更新cdn上面的文件即可,这样就算多个项目 ...
vue项目 vue-quill-editor富文本编辑器+图片上传
目录基础使用: 进阶版: 使用 el-upload 图片上传: 进阶版2.0: 可拖动调整图片大小: 基础使用: 富文本编辑器: 此方法得到的图片为base64编码,图片上传在下面. npm ins ...
vue项目怎么上传到web服务器,vue项目如何通过脚本自动打包上传服务器
问题描述平时部署前端项目,都是手动在命令行里敲:npm run build build完成再手动 scp 输入服务器地址,目录,密码上传到服务器上很是麻烦可不可以写个脚本什么,只需输入一个命令, ...

Vue项目中个人中心头像的上传方法

Vue项目中个人中心头像的上传方法相关推荐

最新文章

热门文章