console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Avatar Upload Demo</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/element-plus"></script>
<script src="//unpkg.com/@element-plus/icons-vue"></script>
<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
<link rel="stylesheet" href="https://unpkg.com/@element-plus/icons-vue/dist/index.css" />
<script src="https://cdn.tailwindcss.com"></script>
<style>
.uoloadSty .el-upload--picture-card{
width:110px;
height:110px;
line-height:110px;
}
.disUoloadSty .el-upload--picture-card{
display:none;
}
</style>
</head>
<body>
<div id="app">
<el-upload :class="{uoloadSty:showBtnDealImg,disUoloadSty:noneBtnImg}"
v-model:file-list="fileList" action="https://api.pearktrue.cn/api/airecognizeimg/"
list-type="picture-card" :on-preview="handlePreview" :on-remove="handleRemove" :on-change="dealImgChange" :limit="limitCountImg">
<el-icon><Plus /></el-icon>
</el-upload>
<el-dialog v-model="dialogVisible">
<img w-full :src="dialogImageUrl" alt="Preview Image" />
</el-dialog>
</div>
<script>
const { createApp, ref } = Vue;
const { ElMessage } = ElementPlus;
const { Plus } = ElementPlusIconsVue;
createApp({
data() {
return {
fileList: [],
dialogImageUrl: '',
dialogVisible: false,
showBtnDealImg:true,
noneBtnImg:false,
limitCountImg:1
};
},
methods: {
hideShow() {
return this.imageUrl !== ''
},
handleRemove(file, fileList){
console.log(file, fileList);
this.noneBtnImg = fileList.length >= this.limitCountImg;
},
handlePreview(file) {
console.log(file);
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
dealImgChange(file, fileList){
this.noneBtnImg = fileList.length >= this.limitCountImg;
}
},
components: {
Plus
}
})
.use(ElementPlus)
.mount('#app');
</script>
</body>
</html>