需求描述:在做图片上传组件的时候 有时候需求回要求只能上传一张图片
bug:element-ui在上传完一张图片后上传按钮还会存在 虽然可以用自带的limt属性加以限制 但是上传按钮依然会存在 且存入数组的值依然会增加
解决:可以判断上传后数组的length来控制图片上传的样式 让其上传一张后隐藏上传按钮 达到控制图片上传的数量需求
<el-form-item label="礼包主图" prop="goodsimage" :required="true">
<el-upload
:class="{ disabled: uploadDisabled }" //这里动态控制样式
:limit="1"
ref="picUpload"
class="pic-div"
action="'xxxxxxx'"
:with-credentials="true"
list-type="picture-card"
:on-remove="removePic"
:on-change="handleEditChange"
:file-list="goodsimage"
:on-exceed="beyond"
>
<div class="el-upload file-upload-container" @click.stop="popFileUpload('0')">
<i class="el-icon-plus"></i>
</div>
</el-upload>
</el-form-item>
// 隐藏图片上传按钮
uploadDisabled() {
return this.goodsimage.length > 0 //判断图片上传的数量动态控制按钮隐藏与显示
},
<style>
.disabled .el-upload--picture-card {
display: none;
}
</style>
最终效果
礼包视频也是如此要求仅限上传1个视频 由于是button按钮 俺就直接使用v-if判断视频的length来控制视频上传按钮的显示与隐藏
<el-button ***v-if="this.goodsvideo.length < 1"*** class="file-upload-btn-container" @click.stop="popFileUpload('1')" size="small" type="primary">点击上传</el-button >
上传视频后按钮隐藏
em…