<template>
<el-upload
class="avatar-uploader"
action="http://118.178.243.81:9590/admin/v1/uploadImage"
:show-file-list="false"
:on-success="handleAvatarSuccess"
>
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<el-icon v-else class="avatar-uploader-icon"><Plus/></el-icon>
</el-upload>
</template>
<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>
<script>
import {ref} from 'vue'
export default {
setup(){
const imageUrl=ref('')
const handleAvatarSuccess=(res, file)=> {
imageUrl.value = URL.createObjectURL(file.raw);
}
return{
imageUrl,
handleAvatarSuccess
}
}
}
</script>
vue3+elementplus实现单张图片上传和替换
于 2023-03-27 15:31:14 首次发布