vant修改用户头像

1.先看下页面需求效果：

2. 引入依赖

import Vue from 'vue';
import { Uploader } from 'vant';Vue.use(Uploader);

3.html代码

   <van-uploader :after-read="afterRead"><div class="user-img"><img :src="userObj.headUrl" alt="" /><div class="img-right">更换头像</div></div></van-uploader>

4.方法代码

// 文件上传完毕后会触发 after-read 回调函数，获取到对应的 file 对象

afterRead(file) {

// 这时候我们创建一个formData对象实例

const formData = new FormData();

// 通过append方法添加需要的file

formData.append("file", file.file);

// 调用uploadFile上传的接口

fileUpload(formData).then((res) => {

//通过push方法把上传的文件存放到上传成功才能提交的数组里面

this.uploadFileList.push(res.data.url);

//后台要的是图片以,分隔的字符串

this.userObj.headUrl = '你的环境地址' + this.uploadFileList.join(",");

});

},

vant修改用户头像相关推荐

个人中心修改用户头像
今天我来记录一下修改用户头像的方法,当然啦,这是我第一次实现这个功能,方法不成熟,多多包涵--- 这个需求是基于nuxt实现的,首先我来说一下需要下载的插件.修改用户头像肯定要能裁剪头像的大小,需要用 ...
mac修改用户头像时显示照片图库未找到图片
上次重装系统后,导入时间机器的备份后,会有两个照片图库.或者不小心把原来的照片图库删了,之后再重新创建照片图库.这两种情况在修改用户头像的时候(包括修改苹果ID账号的头像)都会发现找不到默认的照片图库 ...
phpcms 链接ucenter修改用户头像
做的项目用户的头像是存在ucenter里面,phpcms通过phpsso这个单点登录系统? 具体的我也不清楚,phpcms自带的v9_member表里没有存放用户头像的字段,如果需要修改,就要修改uc ...
Mac电脑修改用户头像操作步骤
第一次使用Mac电脑的新手用户,Mac电脑如何修改用户头像,看起来确实是个很难解决的问题,但给自己心爱的Mac系统配一个个性十足的头像又是一件非常必要的事儿. Mac电脑修改用户头像操作步骤如下: 第 ...
微信小程序-获取用户头像信息以及修改用户头像
这里主要用到button的open-type功能,官网已有说明: 给button设置open-type="chooseAvatar",来使bindchooseavatar方法生效, ...
servlet修改用户头像_修改头像总结
1,背景博客停了好久,主要是最近工作太忙了,还有就是身体状况没有以前那么好了,乘着国庆长假的空档,写下这篇一直想写的文章. 运营平台是我主要致力的一个项目,这个项目分为四个大部分,个人中心,充值中心 ...
servlet修改用户头像_Java上传文件实现更换头像
本博文主要说,用户如何更换头像的操作 1.首先要有一个util的工具类(直接用就可以)上传文件需要的jar包,在最下方. package com.hp.factory; import java.io. ...
【微信小程序-原生开发+云开发+TDesign】修改用户头像（含wx.chooseMedia，wx.cloud.uploadFile，wx.cloud.deleteFile的使用）
效果预览核心技术(含业务逻辑) 选择新头像(本地图片) 使用 wx.chooseMedia 选择本地图片,官网见 https://developers.weixin.qq.com/miniprogr ...
仿牛客论坛项目之修改用户头像
前言: 在项目最开始的时候,我们默认从牛客网的静态资源库中选择一张照片作为用户的头像,但在实际开发中,我们还要考虑用户可以自己设置头像. 思路: 上传文件(上传到硬盘服务器上或者上传到云服务器上, ...
uniapp修改用户头像,昵称等信息
效果图: 点击修改头像按钮后弹出的弹框: 代码: <template><view class="userinfo"><view class=" ...

vant修改用户头像

vant修改用户头像相关推荐

最新文章

热门文章