vue 实现头像修改

实现头像修改功能

在 Vue 中实现头像修改功能通常涉及文件上传、预览和保存等步骤。以下是详细的实现方法：

前端实现

创建文件上传组件，允许用户选择图片文件：

<template>
  <div>
    <input type="file" @change="handleFileChange" accept="image/*">
    <img :src="avatarUrl" v-if="avatarUrl" class="avatar-preview">
    <button @click="uploadAvatar" :disabled="!selectedFile">上传头像</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedFile: null,
      avatarUrl: ''
    }
  },
  methods: {
    handleFileChange(event) {
      const file = event.target.files[0]
      if (file) {
        this.selectedFile = file
        this.avatarUrl = URL.createObjectURL(file)
      }
    },
    async uploadAvatar() {
      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.avatarUrl
      } catch (error) {
        console.error('上传失败:', error)
      }
    }
  }
}
</script>

<style>
.avatar-preview {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
}
</style>

后端处理

后端需要接收上传的文件并保存到服务器或云存储：

// Node.js Express 示例
const express = require('express')
const multer = require('multer')
const path = require('path')

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'uploads/avatars/')
  },
  filename: (req, file, cb) => {
    const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9)
    cb(null, file.fieldname + '-' + uniqueSuffix + path.extname(file.originalname))
  }
})

const upload = multer({ storage })

app.post('/api/upload-avatar', upload.single('avatar'), (req, res) => {
  // 保存文件路径到数据库
  const avatarUrl = `/avatars/${req.file.filename}`
  res.json({ avatarUrl })
})

头像裁剪功能

对于更完善的用户体验，可以集成图片裁剪功能：

<template>
  <div>
    <input type="file" @change="handleFileChange" accept="image/*">
    <vue-cropper
      v-if="imageSrc"
      ref="cropper"
      :src="imageSrc"
      :aspect-ratio="1"
      guides
    ></vue-cropper>
    <button @click="cropImage">裁剪并上传</button>
  </div>
</template>

<script>
import VueCropper from 'vue-cropperjs'
import 'cropperjs/dist/cropper.css'

export default {
  components: {
    VueCropper
  },
  methods: {
    cropImage() {
      this.$refs.cropper.getCroppedCanvas().toBlob(blob => {
        const formData = new FormData()
        formData.append('avatar', blob, 'avatar.jpg')
        // 上传逻辑同上
      }, 'image/jpeg')
    }
  }
}
</script>

云存储集成

对于生产环境，建议使用云存储服务如AWS S3或阿里云OSS：

// AWS S3 上传示例
const AWS = require('aws-sdk')
const s3 = new AWS.S3()

app.post('/api/upload-avatar', upload.single('avatar'), async (req, res) => {
  const params = {
    Bucket: 'your-bucket-name',
    Key: `avatars/${Date.now()}-${req.file.originalname}`,
    Body: req.file.buffer,
    ContentType: req.file.mimetype
  }

  try {
    const data = await s3.upload(params).promise()
    res.json({ avatarUrl: data.Location })
  } catch (err) {
    res.status(500).json({ error: err.message })
  }
})

头像缓存处理

为避免浏览器缓存旧头像，可以在URL中添加时间戳：

// 在获取头像时
this.avatarUrl = `${user.avatar}?t=${Date.now()}`

移动端适配

对于移动端，可以添加拍照功能：

<input type="file" accept="image/*" capture="camera">

以上实现涵盖了从文件选择到上传保存的完整流程，可根据实际需求调整裁剪比例、文件大小限制等参数。