基础组件el-upload二次封装,看这篇!
前端那些趣事
共 2003字,需浏览 5分钟
·
2021-12-12 10:17
前言
相信el-upload组件各位小伙伴都不陌生了,工作中我们也经常使用它。然而,这个组件往往并不能够满足我们所有的需求,为此我特定对此二次封装。小伙伴们可以直接copy如下代码。
template
<div>
<el-upload
:disabled="idCardIsUpload"
class="avatar-uploader"
list-type="picture"
:show-file-list="false"
:http-request="diyRequest"
>
<el-image v-if="idCardImgUrl"
:src="idCardImgUrl"
name="idCardImgUrl"
class="avatar"
@error="imgLoadError"
>el-image>
<el-progress style="margin: 5px;" :width='70' v-else-if="idCardIsUpload" type="circle" :percentage="idCardUploadPercentage">
el-progress>
<div v-else class="div-plus">
<i class="el-icon-plus avatar-uploader-icon">
i>
div>
el-upload>
div>
</template>
script