H5W3
当前位置:H5W3 > 其他技术问题 > 正文

vue element-ui 表单校验如何 校验上传图片是否为空

clipboard.png

 <el-form ref="form" :rules='rules' :model="formsq" label-width="80px">
            <el-form-item label="商品名称" prop="name">
              <el-input v-model="formsq.name" clearable placeholder="请填写商品名称"></el-input>
            </el-form-item>
            <el-form-item label="商品价格"  prop="price">
              <el-input v-model="formsq.price" type="number" clearable placeholder="请填写商品价格"></el-input>
            </el-form-item>
            <el-form-item label="商品描述"  prop="desc">
              <el-input type="textarea" placeholder="请填写商品描述" v-model="formsq.desc"></el-input>
            </el-form-item>
            <el-form-item label="商品封面" prop="fileList">
              <el-upload
                :limit="1"
                :on-success="handleSuccess"
                :before-upload="beforeupload"
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture"
              >
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-form>
 submitmerchant() {
   console.log(this.fileList)
        this.$refs.form.validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },

回答:

handleSuccess里为实例下的变量更新状态:

this.isImgUploaded=true;//已上传图片

确定事件中判断isImgUploaded,有就有图片,没有就没有

回答:

结合el-form表单验证的思路是新建一个隐藏的input框,onchange触发validate事件

// html template 
<el-input :hidden="true" v-model="imgValue"/>

// script

data() {
    return {
      // form validate  rules
      rules: {
          imgValue: [
              { required: true, message: '请上传图片', trigger: 'change'}
          ]
      }
    }
}

回答:

不使用 el-upload 组件的 action 属性上传, 使用 el-upload 组件的 :before-upload 返回 false 判断是否有图片, 然后把用户输入的值添加到 FormData 对象上传

图片描述

图片描述

本文地址:H5W3 » vue element-ui 表单校验如何 校验上传图片是否为空

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址