mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-04 12:17:37 +08:00
68 lines
1.5 KiB
Vue
68 lines
1.5 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" />
|
|
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
|
|
</el-upload>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref } from 'vue'
|
|
import { ElMessage } from 'element-plus'
|
|
import { Plus } from '@element-plus/icons-vue'
|
|
|
|
import type {
|
|
UploadFile,
|
|
UploadRawFile,
|
|
UploadProgressEvent,
|
|
} from 'element-plus'
|
|
|
|
const imageUrl = ref('')
|
|
const handleAvatarSuccess = (res: UploadProgressEvent, file: UploadFile) => {
|
|
imageUrl.value = URL.createObjectURL(file.raw!)
|
|
}
|
|
const beforeAvatarUpload = (file: UploadRawFile) => {
|
|
const isJPG = file.type === 'image/jpeg'
|
|
const isLt2M = file.size / 1024 / 1024 < 2
|
|
|
|
if (!isJPG) {
|
|
ElMessage.error('Avatar picture must be JPG format!')
|
|
}
|
|
if (!isLt2M) {
|
|
ElMessage.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;
|
|
transition: var(--el-transition-duration-fast);
|
|
}
|
|
.avatar-uploader .el-upload:hover {
|
|
border-color: var(--el-color-primary);
|
|
}
|
|
.el-icon.avatar-uploader-icon {
|
|
font-size: 28px;
|
|
color: #8c939d;
|
|
width: 178px;
|
|
height: 178px;
|
|
text-align: center;
|
|
}
|
|
.avatar {
|
|
width: 178px;
|
|
height: 178px;
|
|
display: block;
|
|
}
|
|
</style>
|