el-upload 头像上传
时间: 2023-09-04 10:10:58 浏览: 61
对于头像上传,你可以使用 Element UI 提供的 `el-upload` 组件来实现。下面是一个简单的示例代码:
```html
<template>
<el-upload
class="avatar-uploader"
action="/upload" <!--设置上传的地址-->
:show-file-list="false" <!--隐藏上传成功后的文件列表-->
:on-success="handleSuccess" <!--上传成功后的回调函数-->
:before-upload="beforeUpload" <!--文件上传前的校验函数-->
>
<!-- 上传按钮 -->
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</template>
<script>
export default {
data() {
return {
imageUrl: '', // 文件上传成功后的地址
};
},
methods: {
handleSuccess(response) {
this.imageUrl = response.url; // 保存上传成功后的图片地址
},
beforeUpload(file) {
// 在这里可以进行文件大小、格式等的校验
const isJPG = file.type === 'image/jpeg';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!');
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
return isJPG && isLt2M;
},
},
};
</script>
<style scoped>
.avatar-uploader {
display: flex;
justify-content: center;
align-items: center;
width: 120px;
height: 120px;
border: 1px dashed #d9d9d9;
border-radius: 50%;
overflow: hidden;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
cursor: pointer;
}
.avatar {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
```
上述代码中,`el-upload` 组件用于实现文件上传功能。你需要根据实际情况设置 `action` 属性,即文件上传的地址。`handleSuccess` 方法用于处理上传成功后的回调,你可以在其中保存上传成功后的图片地址。`beforeUpload` 方法用于在文件上传前进行校验,你可以在其中进行文件大小、格式等的验证,并返回 `true` 或 `false` 表示是否允许上传。
另外,你还需要根据自己的需求进行样式调整,上述代码中给出了一个简单的样式示例。