<el-form :model="forms" :rules="rules" ref="forms">
<el-form-item label="粤康码:" prop="cover">
<el-upload
:on-change="handleFileChange"
list-type="picture-card"
:auto-upload="false"
>
</el-upload>
</el-form-item>
</el-form>
export default{
name:"Healthy",
data(){
const validateLogo = (rule, value, callback) => {
if (!this.forms.cover && this.listLength ===0) {
console.log(!this.forms.cover)
callback(new Error('请上传图片'))
} else {
callback()
}
}
return {
listLength: 0,//图片数量
forms: {
cover: null,
},
rules: {
cover: [{ required: true, validator: validateLogo, trigger: 'change' }],
},
}
},
methods:{
handleFileChange(file, fileList){ //图片上传后
this.listLength = fileList.length
if (this.listLength >0){
this.$refs.forms.clearValidate("cover"); //当图片数量大于0则去除校验提示
}
}
}
ElementUI 实现el-upload上传文件必填校验
于 2023-03-24 22:02:17 首次发布
该段代码展示了在Vue.js应用中,使用el-form组件进行表单验证,特别是针对图片上传的处理。当图片数量为0时,要求用户上传图片。on-change事件用于监听文件变化,handleFileChange方法更新图片数量并清除校验提示。
摘要由CSDN通过智能技术生成