vue实现头像上传
Vue 头像上传实现方法
使用 <input type="file"> 基础方法
创建文件输入控件并监听 change 事件：
<template>
<div>
<input type="file" @change="handleFileChange" accept="image/*">
<img v-if="imageUrl" :src="imageUrl" width="150">
</div>
</template>
<script>
export default {
data() {
return {
imageUrl: ''
}
},
methods: {
handleFileChange(e) {
const file = e.target.files[0]
if (!file) return
// 本地预览
this.imageUrl = URL.createObjectURL(file)
// 实际项目中这里添加上传逻辑
}
}
}
</script>使用第三方库（如 vue-upload-component）
安装依赖：
npm install vue-upload-component组件实现：
<template>
<file-upload
v-model="files"
post-action="/upload"
:headers="headers"
@input-file="onInputFile"
>
Upload
</file-upload>
</template>
<script>
import FileUpload from 'vue-upload-component'
export default {
components: {
FileUpload
},
data() {
return {
files: [],
headers: {
'Authorization': 'Bearer token'
}
}
},
methods: {
onInputFile(newFile, oldFile) {
if (newFile && !oldFile) {
// 添加新文件
}
}
}
}
</script>图片裁剪后上传
使用 vue-cropper 实现：
npm install vue-cropperjs组件示例：
<template>
<div>
<input type="file" @change="setImage"/>
<vue-cropper
v-if="imageSrc"
ref="cropper"
:src="imageSrc"
:aspect-ratio="1"
/>
<button @click="cropImage">裁剪并上传</button>
</div>
</template>
<script>
import VueCropper from 'vue-cropperjs'
export default {
components: { VueCropper },
data() {
return {
imageSrc: ''
}
},
methods: {
setImage(e) {
const file = e.target.files[0]
if (!file) return
this.imageSrc = URL.createObjectURL(file)
},
cropImage() {
this.$refs.cropper.getCroppedCanvas().toBlob(blob => {
// 上传 blob 对象
}, 'image/jpeg')
}
}
}
</script>后端对接注意事项
上传接口通常需要：
- 设置 Content-Type 为 multipart/form-data
- 添加认证头信息
- 处理跨域问题
示例 axios 请求：
const formData = new FormData()
formData.append('avatar', file)
axios.post('/api/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data',
'Authorization': 'Bearer token'
}
})最佳实践建议
限制文件类型和大小：
// 在 handleFileChange 方法中添加验证
if (!file.type.match('image.*')) {
alert('请选择图片文件')
return
}
if (file.size > 2 * 1024 * 1024) {
alert('图片大小不能超过2MB')
return
}添加上传进度显示：
axios.post('/upload', formData, {
onUploadProgress: progressEvent => {
const percent = Math.round(
(progressEvent.loaded * 100) / progressEvent.total
)
console.log(percent + '%')
}
})
