vue实现修改头像
Vue 实现修改头像功能
前端实现
创建文件上传组件，使用 <input type="file"> 元素实现文件选择功能。通过 @change 事件监听文件选择变化。
<template>
<div>
<img :src="avatarUrl" alt="头像" width="100" height="100">
<input type="file" accept="image/*" @change="handleFileChange">
<button @click="uploadAvatar">上传头像</button>
</div>
</template>
<script>
export default {
data() {
return {
avatarUrl: '默认头像URL',
selectedFile: null
}
},
methods: {
handleFileChange(event) {
this.selectedFile = event.target.files[0]
// 本地预览
if (this.selectedFile) {
this.avatarUrl = URL.createObjectURL(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)
}
}
}
}
</script>后端API处理
Node.js Express 示例处理文件上传：
const express = require('express')
const multer = require('multer')
const path = require('path')
const app = express()
const upload = multer({ dest: 'uploads/' })
app.post('/api/upload-avatar', upload.single('avatar'), (req, res) => {
if (!req.file) {
return res.status(400).json({ error: '未上传文件' })
}
// 实际项目中应将文件移动到永久存储位置
const avatarUrl = `/avatars/${req.file.filename}`
// 更新用户数据库记录
// UserModel.updateAvatar(req.user.id, avatarUrl)
res.json({ url: avatarUrl })
})
app.listen(3000)图片裁剪功能
使用第三方库如 cropperjs 实现客户端图片裁剪：
<template>
<div>
<img ref="image" src="">
<button @click="cropImage">裁剪并上传</button>
</div>
</template>
<script>
import Cropper from 'cropperjs'
import 'cropperjs/dist/cropper.css'
export default {
mounted() {
this.cropper = new Cropper(this.$refs.image, {
aspectRatio: 1,
viewMode: 1
})
},
methods: {
cropImage() {
this.cropper.getCroppedCanvas().toBlob(blob => {
const formData = new FormData()
formData.append('avatar', blob, 'avatar.jpg')
// 上传处理...
})
}
}
}
</script>存储方案
实际项目中应考虑：
- 使用云存储服务（如阿里云OSS、AWS S3）
- 生成唯一文件名避免冲突
- 限制文件大小和类型
- 删除旧头像文件释放空间
// 示例：阿里云OSS上传
const OSS = require('ali-oss')
const client = new OSS({
region: 'oss-cn-hangzhou',
accessKeyId: 'yourKey',
accessKeySecret: 'yourSecret',
bucket: 'yourBucket'
})
async function uploadToOSS(file) {
const fileName = `avatars/${Date.now()}_${file.originalname}`
await client.put(fileName, file.buffer)
return fileName
}用户界面优化
- 添加加载状态和进度提示
- 显示上传成功/失败反馈
- 添加图片大小和格式验证
- 提供默认头像选项
// 文件验证示例
validateFile(file) {
const validTypes = ['image/jpeg', 'image/png']
const maxSize = 2 * 1024 * 1024 // 2MB
if (!validTypes.includes(file.type)) {
this.error = '仅支持JPEG/PNG格式'
return false
}
if (file.size > maxSize) {
this.error = '图片大小不能超过2MB'
return false
}
return true
}
