vue上传文件,文件是必填项的验证

最近在项目中遇到了上传文件是必填项的用法

刚开始按照传统模式的必填项的做法，在el-form标签中使用prop="fileUpdate"

然后再

 

 结果在选择好文件上传，点击提交表单后，该提示一直存在

于是想到了使用res的属性去更改验证的规则，动态将必填项移除

就有了

<el-form-item ref="uploadElement" prop="fileUpdate" label="上传文件">

<el-upload

                class="upload-demo"

                action="123"

                :http-request="uploadSectionFile"

                :before-remove="beforeRemove"

                :limit="1"

                :on-exceed="handleExceed"

                :file-list="fileList"

              >

                <el-button size="small" :disabled="isDisabled" type="primary">点击上传</el-button>

              </el-upload>

            </el-form-item>

 

在提交表单的时候动态移除

this.publishRules.fileUpdate = []

this.$refs.uploadElement.clearValidate() // 如果上传文件，就把必填校验动态移除

这样就可以验证文件上传是必填项了

 

后来遇到了一个问题，因为我的表单是放到dialog中，提交第一次成功后，模态框关闭，此时再次打开模态框，该验证失效了

解决方法：在模态框关闭事件中，重新对publishRules.fileUpdate赋值就行了

this.publishRules.fileUpdate = [{ required: true, trigger: 'blur', message: '请选择文件上传' }] // 再将信息恢复成默认状态