效果图:
思路:当上传的时候,才显示 进度条,上传完毕,不显示进度条。然后再显示 缩略图
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 /></