element-ui 表单+ 文件上传

el-form 包住 el-upload 并使用 rule 验证文件选择。

分解一下步骤
1、一个form标签 包括属性：rules、model、ref
2、一个 el-form-item 标签 包括属性 ： prop
3、一个 el-upload 组件 在基础用法之上增加使用两个钩子函数（on-change on-remove

html结构如下：

<template>
  <div id="app">

    <el-form :rules="rule" :model="form" ref="form">
      <el-form-item prop="fileName">
        <el-upload
          ref="upload"
          :action="upload.action"
          :auto-upload="upload.autoUpload"
          :on-change="handleFileChange"
          :on-remove="handleFileRemove"
        >
          <el-button slot="trigger" type="primary">选择文件</el-button>
        </el-upload>
      </el-form-item>

      <el-form-item>
        <el-button type="success" @click="handleSubmit()">开始上传</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

  data() {
    return {
      // * form
      rule: { fileName: [{ required: true }] },
      form: {
        fileName: undefined
      },
      // * upload
      upload: {
        autoUpload: false,
        action: "",
        accept: ""
      }
    };
  },

el-upload 中的name 属性和rule 中的属性的可以不相同
关键在于
①el-form-item 中绑定的键名prop 和 rule 要验证的属性名相同（建立关联）。
②使用文件上传组件的钩子函数on-change和on-remove手动修改el-form-item 绑定的值（验证对象）。

js

  methods: {
    /** 触发选择文件 */
    handleFileChange(file, fileList) {
      // ! 添加文件 手动添加this.form.uploadName 使其被rules捕捉为非空
      this.$set(this.form, "fileName", file);
    },
    /** 触发移除文件 */
    handleFileRemove(file, fileList) {
      // ! 移除文件 同时移除this.form.uploadName 使其被rules捕捉为空
      if (!fileList.length) this.$set(this.form, "fileName", undefined);
    },

    /** 触发提交 */
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.submitUpload();
        }
      });
    },
    submitUpload() {
      this.$refs.upload.submit()
      console.log("submit");
    },
  }

解析

1、rule 和 提交的form 对象建立关联之后，直接点击提交按钮将会验证到form.fileName 为空。
2、使用upload的钩子函数，手动的填充和清空form.fileName使rule判断结果发生改变。这个demo没有限制文件上传的数量，但是只要能改变rule的判断结果，就能控制是否进入验证成功后的提交阶段。当上传文件列表的文件被全部移除时，也将验证对象清空。文件列表可以通过钩子函数的参数fileList获取。

以上。