vue修改头像

最新推荐文章于 2025-09-29 11:18:54 发布

原创最新推荐文章于 2025-09-29 11:18:54 发布 · 906 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

vue

本文介绍了如何在Vue项目中利用Vant-UI的van-uploader组件进行头像上传操作，结合实际应用中动态参数传递图片路径的需求，提供了参考实现。

vue修改头像
vant-ui的van-uploader上传图片

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Eihl3sPS-1641283953898)(file:///C:/Users/mmzx/Desktop/1.jpg#pic_center)]

  <van-uploader :after-read="Uploader" >
      <!-- <img width="37px" :src="data.avatar" alt=""> 实际应用时图片路径为动态传参-->
      <img width="37px" src="images/appContact/bingo.png" alt="" class="image">
  </van-uploader>

提示：实际应用时图片路径为动态传参

 methods:{
        // 上传图片
        Uploader(e){
            console.log(e)
            let content = e.file;

            let data = new FormData();
            // FormData 对象的使用：
            // 1.用一些键值对来模拟一系列表单控件：即把form中所有表单元素的name与value组装成一个queryString
            // 2. 异步上传二进制文件。
            //上传图片需要转换二进制这里要用到FormData

            data.append('file',content);
            //这里的file表示给后台传的属性名字，这里看接口文档需要传的的属性

            upimg(data).then(res=>{
            //upimg是封装的请求方法，这里自己改一下就可以，没封装可以用this.$axios

                console.log(res)
                //res返回上传的图片的路径等信息

                //调用更新用户资料接口更改用户信息
                edituser({avatar:res.path}).then(res=>{
                console.log(res)
                })
            })

            //axios请求方法
            // this.$axios.post("图片上传地址", data).then((res) => {
            //   console.log(res)
            // });     
        }

    }