vue 实现头像修改
Vue 实现头像修改
前端实现
使用 <input type="file"> 上传头像文件，并通过 FileReader 预览头像：
<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: '',
selectedFile: null
}
},
methods: {
handleFileChange(e) {
const file = e.target.files[0]
if (file) {
this.selectedFile = file
const reader = new FileReader()
reader.onload = (e) => {
this.avatarUrl = e.target.result
}
reader.readAsDataURL(file)
}
},
async uploadAvatar() {
if (!this.selectedFile) return
const formData = new FormData()
formData.append('avatar', this.selectedFile)
try {
const response = await axios.post('/api/avatar', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
console.log('上传成功', response.data)
} catch (error) {
console.error('上传失败', error)
}
}
}
}
</script>后端处理（Node.js示例）
const express = require('express')
const multer = require('multer')
const path = require('path')
const app = express()
const upload = multer({ dest: 'uploads/' })
app.post('/api/avatar', upload.single('avatar'), (req, res) => {
if (!req.file) {
return res.status(400).send('没有上传文件')
}
// 这里可以处理文件，比如移动到特定目录、生成缩略图等
const filePath = path.join(__dirname, 'public/avatars', req.file.filename)
fs.rename(req.file.path, filePath, (err) => {
if (err) return res.status(500).send('保存文件失败')
// 返回新的头像URL
res.json({
avatarUrl: `/avatars/${req.file.filename}`
})
})
})
app.listen(3000)头像裁剪功能
使用 cropperjs 库实现头像裁剪：
-
安装依赖：
npm install cropperjs -
实现裁剪组件：
<template> <div> <img ref="image" src=""> <button @click="crop">裁剪并上传</button> </div> </template>
export default { mounted() { this.cropper = new Cropper(this.$refs.image, { aspectRatio: 1, viewMode: 1 }) }, methods: { crop() { this.cropper.getCroppedCanvas().toBlob((blob) => { const formData = new FormData() formData.append('avatar', blob, 'avatar.png')
axios.post('/api/avatar', formData)
.then(response => {
console.log('上传成功', response.data)
})
})
}} }
```存储优化
对于生产环境，建议：
- 使用云存储服务（如AWS S3、阿里云OSS等）
- 生成多种尺寸的头像缩略图
- 添加文件类型和大小验证
- 实现图片压缩功能
安全考虑
- 验证文件类型（检查MIME类型和文件扩展名）
- 限制文件大小（通常头像不超过2MB）
- 对上传文件进行病毒扫描
- 使用随机文件名防止路径遍历攻击
