element-ui 表单+ 文件上传

2021-02-20 17:59:59 阅读：739 来源： 互联网

标签：el form 文件 upload rule 表单 ui fileName element

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 绑定的值（验证对象）。

  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获取。
在这里插入图片描述

以上。

标签：el,form,文件,upload,rule,表单,ui,fileName,element
来源： https://blog.csdn.net/one_old_moon_cake/article/details/113885834

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

element-ui 表单+ 文件上传

解析