【vue】 element upload文件上传后表单校验信息还存在

简介: 【vue】 element upload文件上传后表单校验信息还存在

解决方案一:通过增加el-checkbox-group

<el-form-item label="底图文件" prop="underlayFile">
  <!-- 解决文件上传后校验信息还存在的问题 -->
  <!-- 注意修改绑定的模型数据 -->
  <el-checkbox-group v-show="false" v-model="reproductionForm.underlayFile">
  </el-checkbox-group>
  <upload-file ref="uploadFileRef" @getFile="getFile"></upload-file>
</el-form-item>

解决方案二:自定义校验

data(){
    // 自定义验证
  let validateImage = (rule, value, callback) => { //验证器
      if (!this.checkImgSuccess) {     //为true代表图片在  false报错
          callback(new Error('请上传图片'));
      } else {
          callback();
      }
  };
  return{
  // 模型数据
  }
}

在表单的校验规则中加入自定义的校验

rules: {
     coverImg: [{required: true, validator: validateImage, trigger: 'change'}],
},
目录
相关文章
|
1天前
|
JavaScript
vue页面加载时同时请求两个接口
vue页面加载时同时请求两个接口
|
1天前
|
JavaScript
vue里样式不起作用的方法,可以通过deep穿透的方式
vue里样式不起作用的方法,可以通过deep穿透的方式
14 0
|
1天前
|
移动开发 JavaScript 应用服务中间件
vue打包部署问题
Vue项目`vue.config.js`中,`publicPath`设定为&quot;/h5/party/pc/&quot;,在线环境基于打包后的`dist`目录,而非Linux的`/root`。Nginx代理配置位于`/usr/local/nginx/nginx-1.13.7/conf`,包含两个相关配置图。
vue打包部署问题
|
1天前
|
JavaScript 前端开发
iconfont 图标在vue里的使用
iconfont 图标在vue里的使用
18 0
|
1天前
|
Web App开发 编解码 JavaScript
【Vue篇】Vue 项目下载、介绍(详细版)
【Vue篇】Vue 项目下载、介绍(详细版)
8 3
|
1天前
|
JavaScript
vue知识点
vue知识点
12 3
|
1天前
|
移动开发 前端开发
ruoyi-nbcio-plus基于vue3的flowable收回任务后重新进行提交表单的处理
ruoyi-nbcio-plus基于vue3的flowable收回任务后重新进行提交表单的处理
13 0
|
1天前
|
移动开发 JavaScript 前端开发
ruoyi-nbcio-plus基于vue3的flowable的自定义业务显示历史信息组件的升级修改
ruoyi-nbcio-plus基于vue3的flowable的自定义业务显示历史信息组件的升级修改
|
1天前
|
移动开发 前端开发
ruoyi-nbcio-plus基于vue3的flowable的业务表单升级修改(二)
ruoyi-nbcio-plus基于vue3的flowable的业务表单升级修改(二)
|
1天前
|
移动开发 前端开发
ruoyi-nbcio-plus基于vue3的flowable流程基础信息ElementBaseInfo.vue的升级修改
ruoyi-nbcio-plus基于vue3的flowable流程基础信息ElementBaseInfo.vue的升级修改