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

   <template>
      <div>
         <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="fileList">
              <el-input :hidden="true" v-model="formsq.fileList"/>
              <el-upload :disabled="disabled" 
                   :data="{ isOA: true }" 
                   :action="getAuthUpload"
                   :before-upload="beforeUploadListener" 
                   :limit="5" 
                   :on-error="errorListener" 
                   :on-remove="removeListener"
                   :on-success="onSuccessListener">
          <el-button size="small" type="primary">点击上传</el-button>
          <div class="el-upload__tip" slot="tip">提示:上传文件小于3M</div>
          <div class="el-upload__tip" slot="tip" style="color: #ff290c">注意:包含但不限于《供应商信息登记表》、《供应商调查/审查确认表》</div>
            </el-upload>
            </el-form-item>
            <div class="x-form-button">
             <el-button  @click="zxHandleSubmit('formsq')" 
              type="primary">提交</el-button>
            </div>
          </el-form>
      </div>
  </template>
<script>
  import { auth } from '@/api/srm/auth'
  import { getUpload } from '@/api/srm/fileUtils'
  export default {
    data() {
      return {
       // form validate  rules
       rules: {
          fileList: [{ required: true, message: '请上传图片', trigger: 'change'}]
       },
       List:[],
       formsq:{
          fileList: null
       }
     }
    },
   computed: {
      getAuthUpload() {
        return getUpload()
      }
    },
    methods: {
      beforeUploadListener({ size }) {
        if (size > 3072000) {
          this.$message('上传文件太大,请压缩后上传!')
          return false
        }
      },
      onSuccessListener({ code, message, data }, file, fileList) {
        if (code === 200) {
          this.fileList.push(data)
          this.$message.success('上传成功')
          if(this.List && this.List.length > 0){
            this.formsq.fileList = JSON.stringify(this.List)
          }
        } else {
          this.$message.error('上传失败')
        }
      },
      errorListener(err, file) {
        this.$message.error('上传失败')
      },
      removeListener({ response }, List) {
        const { code, data } = response
        if (code === 200) {
          this.List.forEach(function(item, index, arr) {
            if (item == data) {
              arr.splice(index, 1)
            }
          })
        }
      },
     zxHandleSubmit() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.initData()
          }
        })
      },
      async initData() {
        try {
          const params = { ...this.formsq }
          const { message } = await auth(params)
          this.disabled = true
          this.$message.success(message)
        } catch ({ message }) {
          this.$message.error(message)
        }

      }
    }
  }
</script>

<style>
 
</style>

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

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

只是部分代码不全


版权声明:本文为weixin_43962877原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。