ElementUI 实现el-upload上传文件必填校验

web why

已于 2023-03-24 22:05:00 修改

阅读量3.2k

点赞数 1

CC 4.0 BY-SA版权

文章标签： elementui vue.js javascript

于 2023-03-24 22:02:17 首次发布

本文链接：https://blog.csdn.net/weixin_52169403/article/details/129759458

该段代码展示了在Vue.js应用中，使用el-form组件进行表单验证，特别是针对图片上传的处理。当图片数量为0时，要求用户上传图片。on-change事件用于监听文件变化，handleFileChange方法更新图片数量并清除校验提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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则去除校验提示
      }
   }
}