console 命令行工具 X clear
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>
  <!-- 引入Vue3 -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <!-- 引入Element-Plus组件库 -->
  <script src="https://unpkg.com/element-plus"></script>
  <!-- 引入Plus图标 -->
  <script src="//unpkg.com/@element-plus/icons-vue"></script>
  <!-- 引入Element-Plus样式文件 -->
  <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
  <!-- 引入Element-Plus图标样式 -->
  <link rel="stylesheet" href="https://unpkg.com/@element-plus/icons-vue/dist/index.css" />
  <!-- 引入Tailwind样式文件 -->
  <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>
    // 注册Plus图标组件
    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 // 注册Plus图标组件
      }
    })
      .use(ElementPlus)
      .mount('#app');
  </script>
</body>

</html>