mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-15 01:41:20 +08:00
0636e1e240
* style: add import lint * chore: apply eslint rules * chore: add stricter lint * chore: lint all files * auto fix * manually fix * restore build-indices.ts
66 lines
1.3 KiB
Vue
66 lines
1.3 KiB
Vue
<template>
|
|
<el-upload
|
|
class="avatar-uploader"
|
|
action="https://jsonplaceholder.typicode.com/posts/"
|
|
:show-file-list="false"
|
|
:on-success="handleAvatarSuccess"
|
|
:before-upload="beforeAvatarUpload"
|
|
>
|
|
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
|
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
|
</el-upload>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
export default {
|
|
data() {
|
|
return {
|
|
imageUrl: '',
|
|
}
|
|
},
|
|
methods: {
|
|
handleAvatarSuccess(res, file) {
|
|
this.imageUrl = URL.createObjectURL(file.raw)
|
|
},
|
|
beforeAvatarUpload(file) {
|
|
const isJPG = file.type === 'image/jpeg'
|
|
const isLt2M = file.size / 1024 / 1024 < 2
|
|
|
|
if (!isJPG) {
|
|
this.$message.error('Avatar picture must be JPG format!')
|
|
}
|
|
if (!isLt2M) {
|
|
this.$message.error('Avatar picture size can not exceed 2MB!')
|
|
}
|
|
return isJPG && isLt2M
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.avatar-uploader .el-upload {
|
|
border: 1px dashed #d9d9d9;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.avatar-uploader .el-upload:hover {
|
|
border-color: #409eff;
|
|
}
|
|
.avatar-uploader-icon {
|
|
font-size: 28px;
|
|
color: #8c939d;
|
|
width: 178px;
|
|
height: 178px;
|
|
line-height: 178px;
|
|
text-align: center;
|
|
}
|
|
.avatar {
|
|
width: 178px;
|
|
height: 178px;
|
|
display: block;
|
|
}
|
|
</style>
|