el-dialog页面中的上传图片

效果图如下：当上传的图片超过三个之后让文件上传添加组件隐藏

效果图如下：

完整代码：

<template>
     <div class="questionFeedbackPopover" >
          <div class="kefuBox" @click="dialogVisible=true">
            <p class="callKefu">问题反馈</p>
            <p class="kefuImg"></p>
          </div>
          <!-- 问题反馈弹窗 -->
         <el-dialog
            title="问题反馈"
            :visible.sync="dialogVisible"
            width="1143px"
            @close="handleClose">
            <div class="contentMain">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm"  class="demo-ruleForm clear">
                    <div class="leftBox">
                         <el-form-item label="问题标题" prop="questionTitle" class="questionTitle">
                            <el-input type="textarea" v-model="ruleForm.questionTitle" placeholder="请填写"></el-input>
                        </el-form-item>
                        <el-form-item label="问题类型" prop="questionType" class="radioClass">
                            <el-radio-group v-model="ruleForm.questionType">
                                <el-radio label="异常反馈"></el-radio>
                                <el-radio label="使用问题"></el-radio>
                                <el-radio label="功能建议"></el-radio>
                                <el-radio label="其他"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="问题描述" prop="questionDescription" class="questionDescription">
                            <el-input type="textarea" v-model="ruleForm.questionDescription" placeholder="请填写"></el-input>
                        </el-form-item>
                    </div>
                    <div class="rightBox">
                        <el-form-item label="项目名称" class="projectName" >
                            <el-input v-model="ruleForm.projectName" placeholder="请填写"></el-input>
                        </el-form-item >
                        <el-form-item label="异常界面地址" prop="errorPageAddress" class="errorPageAddress">
                            <el-input type="textarea" v-model="ruleForm.errorPageAddress"></el-input>
                        </el-form-item>
                        <!-- 上传图片 -->
                        <el-form-item label="上传异常界面截图"  class="errorPageImg">
                                <el-upload
                                    action="https://jsonplaceholder.typicode.com/posts/"
                                    list-type="picture-card"
                                    :on-remove="handleRemove"
                                    :on-change="handleEditChange"
                                     multiple
                                    :file-list="fileList"
                                    :limit="limitImg"
                                    :class="{hide:hideUpload}"
                                    >
                                    <i class="el-icon-plus"></i>
                                    <div class="rightButtonUpload" >
                                        <button>上传图片</button>
                                        <p>仅支持上传三张图片</p>
                                    </div>
                                </el-upload>
                                <el-dialog :visible.sync="dialogVisibleTwo">
                                        <img width="100%" :src="dialogImageUrl" alt="">
                                </el-dialog>
                                <div class="buttonImg">
                                        <el-button size="mini" style="padding-left:0">一键截图</el-button>
                                        <span>点击一键截图按钮，自动截取当前界面图片</span>
                                </div>
                            
                        </el-form-item>
                    </div>
                   
                    </el-form>
                
               
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleClose();messageAlert()">提 交</el-button>
            </span>
        </el-dialog>
      </div>
</template>
<script>
export default {
    data() {
        return {
            dialogVisible: false,
            dialogImageUrl: '',
            dialogVisibleTwo: false,
            hideUpload: false,
            limitImg:3,
            fileList:[],
            ruleForm: {
                questionTitle: '',
                questionType: '使用问题',
                questionDescription: '',
                projectName: '',
                errorPageAddress: '',
            },
            rules: {
                questionTitle: [
                    { required: true, message: '请填写问题标题', trigger: 'blur' },
                    { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
                ],
                questionType: [
                    { required: true, message: '请选择问题类型', trigger: 'change' }
                ],
                questionDescription: [
                     { required: true, message: '请填写问题描述', trigger: 'blur' },
                    { min: 3, max: 35, message: '长度在 3 到 35 个字符', trigger: 'blur' }
                ],
                errorPageAddress: [
                     { required: true, message: '请填写项目名称', trigger: 'blur' },
                     { min: 3, max: 25, message: '长度在 3 到 25 个字符', trigger: 'blur' }
                ],
                type: [
                     { required: true, message: '请填写异常界面地址', trigger: 'blur' },
                     { min: 3, max: 45, message: '长度在 3 到 45 个字符', trigger: 'blur' }
                ],
                }
        }
    },
    methods: {
        handleClose() {
            this.dialogVisible = false
        },
        handleEditChange (file, fileList) {
        this.hideUpload = fileList.length >= this.limitImg;
            },
        handleRemove (file, fileList) {
            
            this.hideUpload = fileList.length >= this.limitImg
            },
        messageAlert(){
            this.$message({
                message: '恭喜你,提交成功',
                type: 'success'
            });
        }

    }
}
</script>
<style lang="scss">
.hide .el-upload--picture-card {
  display: none;
}

</style>

样式如下：

.questionFeedbackPopover {
	position: fixed;
	z-index: 999999;
	left: 10px;
	bottom: 30%;
	cursor: pointer;
	.el-dialog {
		width: 1143px !important;
	}
	.el-dialog__body {
    padding: 24px 31px;

	}
	.kefuBox {

		width: 50px;


		padding: 12px 9px;

		background: #3171FF;

		box-shadow: -3px 3px 4px 0px rgba(49, 113, 255, 0.23);

		border-radius: 2px;
		.callKefu {

			padding-bottom: 6px;

			border-bottom: 1px solid rgba(255, 255, 255, 0.26);

			color: #FFFFFF;
			font-size: 14px;

		}

		.kefuImg {

			margin: auto;

			margin-top: 11px;

			width: 25px;

			height: 23px;

			background: url(~@/ets-ui/img/questionBack.png) no-repeat;

			background-size: 100% 100%;

			background-position: 0 0;



		}

	}
	
	.contentMain {
		position: relative;
		&::after {
			content:'';
			display: block;
			width: 1px ;
			border-left: 1px solid #EEEEEE;
			height: 100%;
			position: absolute;
			top: 0;
			left: 50%;
		}
	}
	.el-form {
		// display: flex;
		// justify-content: space-between;
		position: relative;
		
		.el-form-item__label { 
			line-height: 22px;
			padding-bottom: 8px;
		}
		.el-form-item__content {
			margin-left: 0 !important;
			line-height: 22px;
		}
		.el-textarea__inner {
			resize: none;
		}
		.el-form-item {
			margin-bottom: 15px;
		}
		.el-textarea__inner:focus {
			border-color: #3271ff;
		}
		.questionTitle {
			textarea {
				height: 72px;
			}
		}
		.questionDescription {
			textarea {
				height: 162px;
			}
		}
		
	}
	.leftBox,.rightBox {
		width: 45%;
	}
	.leftBox {
		float: left;
		.radioClass {
			.el-form-item__content {
				line-height: 10px;
			}
			.el-form-item__label {
				width: 100%;
				text-align: left;
			}
		}
	}
	.rightBox {
		float: right;
		.projectName {
			input {
				height: 32px;
			}
		}
		.errorPageAddress {
			textarea {
				height: 91px;
				background: #FAFAFA;
			}
		}
		.errorPageImg {
			.el-upload--picture-card i {
				width: 16px;
				height: 16px;
			}
			.el-form-item__label {
				width: 100%;
				text-align: left;
			}
			.el-upload--picture-card {
				width: 96px;
				height: 96px;
				position: relative;
				// line-height: 96px;
			}
			.el-upload--picture-card:hover, .el-upload:focus {
				border-color: #3271ff;
				color: #3271ff;
			}
			.el-icon-plus:before {
				font-size: 16px;
			}
			.buttonImg {
				margin-top: 20px;
				button {
					background: #42D28E;
					border-radius: 2px;
					font-size: 14px;
					color: #fff;
				}
				span {
					padding-left: 10px;
				}
			}
			.el-upload-list--picture-card .el-upload-list__item {
				width: 96px;
				height: 96px;
			}
		}
		.rightButtonUpload {
			    /* float: left; */
				position: absolute;
				line-height: 10px;
				right: -151px;
				top: 0;
				button {
					margin-top: 15px;
					padding: 5px 16px 5px 35px;
					background-color: #fff;
					background-image: url(~@/ets-ui/img/up_load.png);
					background-repeat:no-repeat;
					background-size: 16px 16px;
					background-position: 16px center;
					border-radius: 2px;
					border: 1px solid rgba(0, 0, 0, 0.15);
					font-size: 14px;
					color: rgba(96,98,102,1);
				}
				p {
					padding-top: 8px;
					font-size: 14px;
					color: rgba(96,98,102,1);
				}
				
		}
		.el-icon-plus:before {
			content: "\e6d9";
			top: 50% ;
			transform: translate(-50%, -50%);
			left: 50%;
			position: absolute;
		}
	}
}