如何修改Vant组件中用户的头像图片？

本文共计882个文字，预计阅读时间需要4分钟。

目录 + 使用 vant 修改用户头像 + vant 实现纯客户端端用户头像上传预览 + 修改用户头像 + 在我们的项目中，经常会遇到修改用户个人信息的操作，使用的组件是 vant 中的 van-uploader。

目录

• vant修改用户的头像
• vant实现纯客户端用户头像上传预览

vant修改用户的头像

我们的项目中经常会遇到用户个人信息的修改，当然用的组件就是 vant 中的 van-uploader 组件， 但是这个组的是有一个回显功能的， 它的样式不太符合我们， 更改用户头像的场景

对比一下

van-uploader 的本来的样式是这样的

而我们需要修改用户头像的样式是这样的

我们的需求就是 上传完图像之后， 再次点击头像， 还可以再次上传一个新的头像， 这样的需求， van-uploader 中的 fileList是实现不了的

那么我是怎么实现这个功能的呢？

我没有使用 van-uploader 的 fileList 属性， 我使用的它的一个 slot 的插槽功能

图中的 van-image 的src 是写死了的， 它可以通过 接口请求返回的数据来改变。