vant 个人中心头像修改

1,先实现前端点击获取文件对象效果

<van-cell title="头像" is-link center><template #default><van-image round class="avatar" :src="profile.photo" @click="$refs.iptFile.click()"/><!-- file 选择框 --><inputtype="file"ref="iptFile"v-show="false"accept="image/*"@change="onFileChange"/></template>
</van-cell><script>
export default {methods: {// 文件选择方法onFileChange (ev) {console.log(ev.target.files[0])}}
}
</script>

2,接口定义

// 用户- 更新头像
// 注意: formObj的值必须是一个表单对象
// '{"a": 10, "b": 20}' // 对象格式的JSON字符串
// new FormData() // 表单对象
export const updatePhotoAPI = (formObj) => {return request({url: '/v1_0/user/photo',method: 'PATCH',data: formObj// 如果你的请求体内容是表单对象, 浏览器会自动携带请求头Content-Type为multipart/form-data})
}

3,引入接口, 传入表单对象, 更新页面

import { updatePhotoAPI } from '@/api'
export default {methods: {// 文件选择方法async onFileChange (ev) {//   console.log(ev.target.files[0])if (ev.target.files.length === 0) return // 防止用户未选择图片const fd = new FormData()fd.append('photo', ev.target.files[0]) // photo在表单里参数名携带const res = await updatePhotoAPI(fd)console.log(res)this.profile.photo = res.data.data.photo // 更新最新头像}}
}

vant 个人中心头像修改相关推荐

ucenter用户中心头像修改,不使用自带方法，不使用flash 转
项目中用户中心用的是ucenter,需要直接把开放平台的用户图像保存到本系统,uc自带的uc_avatar方法无法满足需求,通过用 SocketSniff对该flash上传图片抓包分析,该flash先 ...
基于jQuery会员中心安全修改表单代码
基于jQuery会员中心安全修改表单代码.这是一款登录密码,交易密码,手机号码,实名认证,电子邮箱,安全设置表单,会员表单等设置代码.效果图如下: 在线预览源码下载实现的代码. html代码 ...
Web项目实战 | 购物系统v2.0 | 开发记录（五）使用base64编码实现头像修改 | 用户个人信息修改 | JQuery动态提示
文章目录以往记录一.运行环境二.实现头像修改三.用户个人信息修改四.Bug & DeBug 以往记录 Web项目实战 | 购物系统v2.0 | 开发记录(一)需求分析 | 技术选型 ...
html5实现DisuzX论坛手机版ucenter头像修改
discuz的手机版是没有自带头像上传的功能,而pc版是用flash实现的上传,不能直接用于手机版. 首先先分析一下pc版的头像修改原理,通过抓包,提取了保存头像的url: http://bbs.xx ...
Flask博客开发实战-用户中心实现修改个人信息功能
用户中心实现修改个人信息功能该功能的实现在做用户管理的时候其实我们已经写过了,这里其实仅仅只需要做的是获取到当前用户,允许用户登录后修改自己用户信息就可以了! 补充User的模型数据 gexing ...
简单的用户头像修改功能(springboot后台)
最近做了一个网站:www.qihea.xyz,实现了一个小功能-头像修改,记录一下实现过程. 说来有点惭愧,这js代码是抄袭的...而且忘了从哪抄的了. 实现效果: 提交后抄袭的也要厚着脸皮说是我凭 ...
Android集成环信easeui,设置圆形头像,修改气泡和扩展栏,跳过打包冲突
初次集成环信的话还是有很多坑的, 我也是个新手,技术客服各种问,各种找人,才堪堪摸到门槛,记录下一点东西,希望给那些初次集成的朋友一点tips. 1,集成环信的时候,如果你不需要很多如视频聊天,等的功 ...
Android_个人中心_修改个人信息
番外:昨天发现一个可以直接操作SIM卡的软件,之前听说过Android5.1后支持SIM卡的操作,毕竟这跟我应该有或多或少的关系,所以打算从新版SDK入手学习一下,问题来了,我没有相关SDK,却发现这 ...
vivos9更改控制中心样式(修改方法分享)
vivos9手机的控制中心为用户准备了多种快速功能.计算器.热点.蓝牙.手电筒等.如何更改控制中心的风格?请不要着急.现在,我将从小的一面开始向大家详细介绍.希望对你有帮助! vivos9控制中心修改 ...
Vue项目中个人中心头像的上传方法
我们实现的时点击头像栏这一整行都可以更换头像这个功能. 我们需要使用vant组件库中的Uploader文件上传组件. 即: <van-uploader :after-read="aft ...

vant 个人中心头像修改

vant 个人中心头像修改相关推荐

最新文章

热门文章