Element-ui上传图片后隐藏上存控件

在使用Element-ui el-upload组件的时候,发现我只想上存一张图片,比如头像的上存,然而上存一张后,控件还可以继续上存。

一下的方法是Element-ui上传图片后隐藏上存控件。

在element-ui中使用绑定on-change属性方法来达到.

 <el-upload
                                    :class="['uploadcard', uploadDisabled2 ? 'disabled2' :'displaynone']"
                                    action="/api-promanagement/companys/upload"
                                    list-type="picture-card"
                                    :show-file-list="true"
                                    :on-success="handleAvatarSuccessBack"
                                    :before-upload="beforeAvatarUpload"
                                    :limit="1"
                                    :on-change="handleLimit2"
                                    :on-remove="handleRemove2"
                                >
                                    <img
                                        v-if="formData.idCardBack"
                                        :src="formData.idCardBack"
                                        class="avatar-uploader-img"
                                    />
                                    <img v-else src="@images/certification/card2.png" alt />
                                </el-upload>

data部分:

uploadDisabled:false,

绑定方法:

handleLimit2(file, fileList) {
            if ((fileList.length == 1)) {
                this.uploadDisabled2 = true;
            }
        },

css部分:

// .el-upload--picture-card 控制加号部分
.disabled .el-upload--picture-card {
    display: none!important;
}
点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注