vue实现修改头像

实现修改头像功能

前端实现（Vue.js部分）

1. 创建头像上传组件

   
   <template>
   <div class="avatar-upload">
    <img :src="avatarUrl" alt="头像" class="avatar-preview">
    <input type="file" ref="fileInput" accept="image/*" @change="handleFileChange">
    <button @click="uploadAvatar">更新头像</button>
   </div>
   </template>

export default { data() { return { avatarUrl: '/default-avatar.jpg', selectedFile: null } }, methods: { handleFileChange(event) { this.selectedFile = event.target.files[0] this.previewAvatar() }, previewAvatar() { if (this.selectedFile) { const reader = new FileReader() reader.onload = (e) => { this.avatarUrl = e.target.result } reader.readAsDataURL(this.selectedFile) } }, async uploadAvatar() { if (!this.selectedFile) return

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

  try {
    const response = await axios.post('/api/upload-avatar', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })
    this.avatarUrl = response.data.url
    this.$emit('avatar-updated', response.data.url)
  } catch (error) {
    console.error('上传失败:', error)
  }
}

} }

```

1. 样式优化

   
   .avatar-upload {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 10px;
   }

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

input[type="file"] { display: none; }

#### 后端API实现（Node.js示例）

1. 处理文件上传
```javascript
const express = require('express')
const multer = require('multer')
const path = require('path')

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'public/uploads/avatars')
  },
  filename: (req, file, cb) => {
    const ext = path.extname(file.originalname)
    cb(null, `${Date.now()}${ext}`)
  }
})

const upload = multer({ storage })

router.post('/upload-avatar', upload.single('avatar'), (req, res) => {
  if (!req.file) {
    return res.status(400).json({ error: '请选择有效的图片文件' })
  }

  const avatarUrl = `/uploads/avatars/${req.file.filename}`
  // 这里应该更新数据库中的用户头像URL

  res.json({ url: avatarUrl })
})

数据库更新

1. 更新用户记录

   // 假设使用Mongoose
   async function updateUserAvatar(userId, avatarUrl) {
   try {
    const user = await User.findByIdAndUpdate(
      userId,
      { avatar: avatarUrl },
      { new: true }
    )
    return user
   } catch (error) {
    throw error
   }
   }

额外功能建议

1. 图片裁剪功能

   
   // 可以使用cropper.js库实现
   import Cropper from 'cropperjs'

methods: { initCropper() { const image = this.$refs.avatarPreview this.cropper = new Cropper(image, { aspectRatio: 1, viewMode: 1, }) }, getCroppedImage() { return new Promise(resolve => { this.cropper.getCroppedCanvas().toBlob(blob => { resolve(blob) }) }) } }

2. 文件大小和类型验证
```javascript
handleFileChange(event) {
  const file = event.target.files[0]
  if (!file) return

  const validTypes = ['image/jpeg', 'image/png', 'image/gif']
  const maxSize = 2 * 1024 * 1024 // 2MB

  if (!validTypes.includes(file.type)) {
    alert('请上传JPG/PNG/GIF格式的图片')
    return
  }

  if (file.size > maxSize) {
    alert('图片大小不能超过2MB')
    return
  }

  this.selectedFile = file
  this.previewAvatar()
}

1. 进度显示

   axios.post('/api/upload-avatar', formData, {
   headers: {
    'Content-Type': 'multipart/form-data'
   },
   onUploadProgress: progressEvent => {
    const percentCompleted = Math.round(
      (progressEvent.loaded * 100) / progressEvent.total
    )
    this.uploadProgress = percentCompleted
   }
   })