vue+elementui上传头像
时间: 2023-07-30 14:08:54 浏览: 58
在Vue和Element UI中,你可以使用`el-upload`组件来实现头像上传的功能。以下是一个简单的示例代码:
```vue
<template>
<div>
<el-upload
class="avatar-uploader"
action="/upload"
:show-file-list="false"
:before-upload="beforeUpload"
:on-success="handleSuccess"
:on-error="handleError"
>
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</div>
</template>
<script>
export default {
data() {
return {
imageUrl: ''
};
},
methods: {
beforeUpload(file) {
// 在上传之前的钩子函数中可以进行一些验证操作,如文件类型、大小等
const isJPG = file.type === 'image/jpeg';
const isPNG = file.type === 'image/png';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG && !isPNG) {
this.$message.error('只能上传 JPG/PNG 格式的图片');
return false;
}
if (!isLt2M) {
this.$message.error('图片大小不能超过 2MB');
return false;
}
},
handleSuccess(response) {
// 上传成功的回调函数,可以在这里处理返回的数据
this.imageUrl = response.data.url;
},
handleError() {
// 上传失败的回调函数
this.$message.error('上传头像失败');
}
}
};
</script>
<style scoped>
.avatar-uploader {
display: flex;
align-items: center;
justify-content: center;
width: 120px;
height: 120px;
border-radius: 50%;
overflow: hidden;
background-color: #f5f5f5;
cursor: pointer;
}
.avatar {
width: 100%;
height: 100%;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
}
</style>
```
在上述代码中,我们使用了`el-upload`组件来创建一个头像上传的区域。通过设置`action`属性来指定上传的接口地址,通过设置`before-upload`钩子函数来进行文件验证,通过设置`on-success`和`on-error`回调函数来处理上传成功和失败的情况。
在`handleSuccess`函数中,我们可以通过接口返回的数据来更新头像的URL,并在模板中使用`<img>`标签来显示头像。如果上传失败,则在`handleError`函数中给出错误提示。
希望这个示例对你有帮助!