遇到的问题

平常大家都会遇到写表单，有表单就会有表单验证。然后有时候我们需要用到上传图片。这时候问题来了，其他的表单比如输入框，下拉框的验证都比较容易，只要按照 elementPlus 官网上的相应的配置 prop 和 rules 然后就可以实现验证。

1
2
3
4
5
6
7
8
9
10
11
12
const rules = reactive({
  deviceSn: [{ required: true, message: "设备编码不能为空", trigger: "blur" }],
  deviceType: [
    { required: true, message: "设备类型不能为空", trigger: "change" },
  ],
  deviceName: [{ required: true, message: "设备名不能为空", trigger: "blur" }],
  netMode: [{ required: true, message: "联网方式不能为空", trigger: "change" }],
  productIdOrTemplateId: [
    { required: true, message: "设备模板不能为空", trigger: "change" },
  ],
  imgUrl: [{ required: true, message: "请选择图片", trigger: "change" }],
});

这里要注意trigger触发器，不同的表单类型触发器是不同的。输入框就是 blur，下拉框就是 change。但是这时候就有问题，因为我们用的上传el-upload，与其他基础的表单控件不一样，没办法监听到它。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<el-form-item prop="imgUrl">
  <div class="uploader-wapper">
    <el-upload
      class="avatar-uploader"
      :class="!form.imgUrl ? 'upload-border' : ''"
      action="#"
      :before-upload="beforeAvatarUpload"
      :show-file-list="false"
      :http-request="handleUpload"
    >
      <img v-if="form.imgUrl" :src="form.imgUrl" class="avatar" />
      <el-icon class="avatar-uploader-icon" v-else><Upload /></el-icon>
      <span class="change-text" v-if="form.imgUrl">更换</span>
    </el-upload>
  </div>
</el-form-item>

那我们应该如何进行验证呢？其实很容易，@change=”handleChange”我们给上传控件给一个change事件。然后我们实现一下这个方法。

1
2
3
4
const handleChange = () => {
  // 监听图片上传组件的 change 事件，手动触发表单校验
  formRef.value.validateField('imgUrl');
};

我们手动触发一下表单校验，这样就能触发上传文件后触发验证。