当前位置：首页 > VUE

vue切换头像功能实现

2026-01-22 15:30:37VUE

Vue 头像切换功能实现

核心思路
通过文件上传组件获取用户选择的图片文件，处理后显示为头像，并支持本地缓存或上传至服务器。

基础实现步骤

模板部分

<template>
  <div class="avatar-container">
    <img :src="avatarUrl" alt="头像" class="avatar" />
    <input 
      type="file" 
      accept="image/*" 
      @change="handleFileChange" 
      ref="fileInput"
      style="display: none"
    />
    <button @click="$refs.fileInput.click()">更换头像</button>
  </div>
</template>

脚本部分

<script>
export default {
  data() {
    return {
      avatarUrl: require('@/assets/default-avatar.png'), // 默认头像
      selectedFile: null
    }
  },
  methods: {
    handleFileChange(e) {
      const file = e.target.files[0];
      if (!file) return;

      // 验证文件类型
      if (!file.type.match('image.*')) {
        alert('请选择图片文件');
        return;
      }

      // 预览图片
      const reader = new FileReader();
      reader.onload = (e) => {
        this.avatarUrl = e.target.result;
        this.selectedFile = file;

        // 可选：立即上传或保存到本地存储
        // this.uploadAvatar();
      };
      reader.readAsDataURL(file);
    },
    uploadAvatar() {
      if (!this.selectedFile) return;

      const formData = new FormData();
      formData.append('avatar', this.selectedFile);

      // 示例：使用axios上传
      axios.post('/api/upload-avatar', formData, {
        headers: { 'Content-Type': 'multipart/form-data' }
      }).then(response => {
        console.log('上传成功', response.data);
      }).catch(error => {
        console.error('上传失败', error);
      });
    }
  }
}
</script>

进阶优化方案

本地缓存实现

// 读取本地存储的头像
created() {
  const savedAvatar = localStorage.getItem('userAvatar');
  if (savedAvatar) this.avatarUrl = savedAvatar;
},

// 保存到本地存储
methods: {
  saveToLocal() {
    localStorage.setItem('userAvatar', this.avatarUrl);
  }
}

图片压缩处理
安装compressorjs库：

npm install compressorjs

使用示例：

import Compressor from 'compressorjs';

handleFileChange(e) {
  const file = e.target.files[0];
  new Compressor(file, {
    quality: 0.6,
    success(result) {
      const reader = new FileReader();
      reader.readAsDataURL(result);
      reader.onload = () => {
        this.avatarUrl = reader.result;
      };
    },
    error(err) {
      console.error(err.message);
    }
  });
}

样式建议

.avatar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 10px;
}

button {
  padding: 8px 16px;
  background: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}