头像上传_le头像-优快云博客

本文介绍了一个个人信息页面的设计与实现过程，重点展示了如何使用Vue.js和相关组件库来创建美观且实用的用户界面。特别是针对头像上传功能，详细说明了从前端界面设计到后端接口调用的具体实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div class="wrapper">
    <van-nav-bar title="个人信息" left-arrow @click-left="toBack" />
    <div class="main">
      <van-cell title="头像" is-link size="large" center>
        <template #right-icon>
          <img :src="userinfo.avatar" alt="" class="avatar" @click="showimg = true" />
        </template>
      </van-cell>
    </div>
    <!-- 修改头像 -->
      <van-uploader :after-read="onRead" accept="image/*" style="width: 100%">
        <van-button type="default" block style="width: 100vw">从手机相册选择</van-button>
      </van-uploader>
  </div>
</template>
<script>
import area from '../../../utils/Area'
import { Toast } from 'vant'
export default {
	data(){
	userinfo: '',
	},
	methods:{
	// 头像上传
    onRead(file) {
      console.log(file)
      let formData = new FormData()
      formData.append('file', file.file)
      this.$http.updateimg(formData).then(res => {
        console.log(res)
        let img = res.data.data.path
        this.showimg = false
        this.$http.updateuser({ avatar: img }).then(res => {
          this.getUserInfo()
          Toast('修改成功')
        })
      })
    },
    }
	
}
</script>
<style lang="scss" scoped>
.wrapper {
  width: 100%;
  height: 100vh;
  background-color: #f0f2f5;
  .main {
    margin-top: 2vh;
    .avatar {
      width: 1rem;
      height: 1rem;
    }
  }
}
</style>