使用iview 的表单组件验证 Upload 组件

这是我在工作中遇到的一个问题, 困扰了我一段时间, 在多方搜索下, 终于解决了

问题描述:

• 使用iview的form组件, 并验证各个字段的必填项
• 验证 upload 时不知道该怎么验证, 验证出先问题, 上传后必填项没有取消掉

要做的逻辑

• 点击确定按钮, 没有填的form 项, 提示错误, 当填入数据后提示验证成功

解决方案

• 先看代码

// demo.vue

// html
<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="120">
  <FormItem label="店铺名称" prop="name">
    <Input v-model="formValidate.name" placeholder="请输入店铺名称..."></Input>
  </FormItem>
  <FormItem label="店铺LOGO" prop="uploadLogo">
      <Upload
        v-model="formValidate.uploadLogo"
        :on-success="handleSuccess"
        ref="upload"
        action="//jsonplaceholder.typicode.com/posts/"
      >
        <div class="upload">
          <Icon type="md-add" size="52" style="color: #999"></Icon>
        </div>
      </Upload>                
  </FormItem>
  <FormItem>
    <Row>
      <Col span="4" offset="8">
        <Button type="primary" style="width: 200px"
          @click="handleSubmit('formValidate')"
        >保存</Button>
      </Col>
    </Row>
  </FormItem>
</Form>

// js
<script>
export default {
  name: "ShopBasicFormation",

  data() {
    // 自定义验证 判断上传文件 fileList 的长度, 这样就和普通输入框表现一致了
    const validateUpload = (rule, value, callback) => {
      if(this.uploadList && this.uploadList.length === 0) {
        callback(new Error('请上传logo'))
      } else {
        callback()
      }
    }
    return {
      // 设置 data
      uploadList: [],
      formValidate: {
        name: "",
        uploadLogo: null,
      },
      // 设置验证规则
      ruleValidate: {
        name: [
          { required: true, message: "输入不能为空", trigger: "blur" },
        ],
        // 上传的规则就是 自定义验证的规则
        uploadLogo: [
          { required: true, validator: validateUpload, trigger: 'change'}
        ],
      }
    };
  },
  mounted () {
    this.uploadList = this.$refs.upload.fileList
    console.log(this.uploadList)
  },
  methods: {
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.$Message.success("成功");
        } else {
          this.$Message.error("请输入正确的内容");
        }
      });
    },
    handleSuccess (res, file) {
      console.log(res, file)
    },
  }
};
</script>

总结

• 主要是利用自定义验证的规则
• 判断 fileList 的长度来判断是否已经上传了
• 如果 length 大于 0, 说明已经上传, 小于 0, 说明没有上传