vue 商城项目用户页面，上传头像存储

阿狸lyinshaofeng

于 2022-10-23 12:13:46 发布

阅读量778

点赞数

文章标签： vue.js javascript html

本文链接：https://blog.youkuaiyun.com/lyinshaofeng/article/details/127473104

版权

这是一个Vue.js实现的商城项目用户页面，用户可以上传头像并进行存储。当用户已登录时，展示用户名、积分以及退出选项；未登录则提示登录或注册。使用`axios`进行API交互，头像上传通过`FormData`发送POST请求，并在成功后更新用户信息。同时，提供了登录、注销功能。

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

<template>
   <div id="">
       <h1>用户中心</h1>
       <p v-if="$store.state.user.userInfo.name">
           <label>
               <input type="file" ref="myfile" name="file" @change="fileChange()" />
               <img :src="user.avatar" width="100" class="avatar" />
           </label>
           { {$store.state.user.userInfo.name}},积分{ {$store.state.user.userInfo.score}}
           <a href="" @click.prevent="$store.dispatch('logout')">退出</a>
           
       </p>
       <p v-else>
           <router-link to