在实际项目中,上传各种图片,其中涉及到身份证,但是一般身份证正反面只有一张,所以要求上传了身份证正反面之后,上传按钮需要隐藏,之前有看到有博主是将上传框的背景图片动态设置,上传成功之后,身份证放入上传框框中,但是此时就不能对上传的身份证做删除、查看等操作,如果上传错误的话,由于身份证上传一般会设置limit=1,所以点击上传的身份证进行更换,会提示只能上传一张图片等提示,因此合理的方式应该是上传身份证成功之后,隐藏上传按钮,show-file-list设为true,具体实现方式:
1、el-upload里面绑定一个class:
class="{disabled: uploadDisabled}"
2、data里面进行定义
uploadDisabled:false,//控制上传按钮
3、在el-upload的on-change钩子函数中进行状态参数的改变,上传了一张,上传按钮隐藏
changePictureUpload(file,fileList){
this.uploadDisabled = fileList.length >= 1;
}
4、在el-upload的on-remove钩子函数中进行状态参数的改变,删除了之后,上传按钮显示
removeFile(file, fileList){
this.uploadDisabled1 = fileList.length >= 1;
}
5、在style中修改样式
.upload-box.disabled {
::v-deep .el-upload--picture-card {
display: none;
}
}
完工。
结果:
上传前:
上传后