vue3 + ts + element plus 上传缩略图片、更换新图片、显示进度条_element plus rules 必须上传图片

效果图：

思路：当上传的时候，才显示 进度条，上传完毕，不显示进度条。然后再显示 缩略图

 HTML部分：

<el-form-item label="缩略图" prop="picurl">
 
      <!--缩略图-->
      <img v-if="showThumbnail" :src="showThumbnailUrl"  class="thumbnail" />
 
 
      <!---进度条--->
      <el-progress 
        v-if="showProcess"          
        type="circle" 
        :percentage="progressPercent"
        class="process"
        >
       </el-progress>
 
 
      <!---上传组件---->
      <el-upload 
        :show-file-list="false" 
        :auto-upload="true" 
        :before-upload="handleThumbnailBeforeUpload" 
        :http-request="handleThumbnailUpload" 
        :on-change="handleThumbnailChange"
        >
 
        <!----上传按钮--->
        <el-button type="primary">
          <el-icon :size="18"><UploadFilled /></el-icon> <span>上传&