vue 实现换头像
使用 Vue 实现换头像功能
上传头像组件
在 Vue 中创建一个头像上传组件，包含文件选择、预览和上传功能。
<template>
<div class="avatar-upload">
<img :src="avatarUrl" class="avatar-preview" />
<input type="file" @change="handleFileChange" accept="image/*" />
<button @click="uploadAvatar">上传头像</button>
</div>
</template>
<script>
export default {
data() {
return {
avatarUrl: require('@/assets/default-avatar.jpg'),
selectedFile: null
}
},
methods: {
handleFileChange(event) {
const file = event.target.files[0]
if (file) {
this.selectedFile = file
this.avatarUrl = URL.createObjectURL(file)
}
},
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.$emit('avatar-updated', response.data.avatarUrl)
} catch (error) {
console.error('上传失败:', error)
}
}
}
}
</script>
<style>
.avatar-upload {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.avatar-preview {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
}
</style>后端接口处理
需要配置后端API接收头像文件并保存。以下是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, 'public/uploads/avatars')
},
filename: (req, file, cb) => {
const ext = path.extname(file.originalname)
cb(null, `${Date.now()}${ext}`)
}
})
const upload = multer({ storage })
app.post('/api/upload-avatar', upload.single('avatar'), (req, res) => {
const avatarUrl = `/uploads/avatars/${req.file.filename}`
// 这里应该更新用户数据库中的头像URL
res.json({ avatarUrl })
})头像裁剪功能
如需更完善的体验，可以集成头像裁剪功能：
npm install vue-cropperjs在组件中使用：
<template>
<div>
<input type="file" @change="setImage" accept="image/*" />
<vue-cropper
ref="cropper"
:src="imgSrc"
:aspect-ratio="1"
:auto-crop-area="0.8"
/>
<button @click="cropImage">裁剪并上传</button>
</div>
</template>
<script>
import VueCropper from 'vue-cropperjs'
import 'cropperjs/dist/cropper.css'
export default {
components: { VueCropper },
data() {
return {
imgSrc: ''
}
},
methods: {
setImage(e) {
const file = e.target.files[0]
if (!file) return
const reader = new FileReader()
reader.onload = (event) => {
this.imgSrc = event.target.result
}
reader.readAsDataURL(file)
},
cropImage() {
this.$refs.cropper.getCroppedCanvas().toBlob((blob) => {
const formData = new FormData()
formData.append('avatar', blob, 'avatar.png')
axios.post('/api/upload-avatar', formData)
.then(response => {
// 处理上传成功
})
})
}
}
}
</script>头像显示组件
创建一个独立的头像显示组件：
<template>
<div class="avatar-display">
<img :src="avatarUrl" :alt="altText" />
<slot></slot>
</div>
</template>
<script>
export default {
props: {
avatarUrl: {
type: String,
required: true
},
altText: {
type: String,
default: '用户头像'
},
size: {
type: Number,
default: 100
}
}
}
</script>
<style>
.avatar-display img {
width: v-bind(size + 'px');
height: v-bind(size + 'px');
border-radius: 50%;
object-fit: cover;
}
</style>这些组件和代码片段组合起来可以构建完整的头像更换功能，包括上传、预览、裁剪和显示。根据实际项目需求，可以进一步调整样式和功能细节。
