el-upload When auto-upload is set to false, the before-upload hook is not triggered

1. Problem description

1. When uploading, whether the component is automatically uploaded, you can set the following properties

// auto-upload 是否在选取文件后立即进行上传

// 选取文件后 不自动上传
:auto-upload="false"

2. When :auto-upload="false", the component

 After setting, it is found that before-uploadthis hook is not triggered;

The original logic is
inside before-uploadthis hook to上传的文件进行限制

before-upload   上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。

Two, the solution

use on-changethis hook

 :on-change="handleChange"

on-changeProperty introduction

on-change
文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用

Pay attention to add a judgment

if (file.status !== "ready") return;

The upload file restriction code is as follows: 

           handleChange(file)  {
                if (file.status !== "ready") return;
                let suffName = file.name.substring(file.name.lastIndexOf('.') + 1)
                const extension = suffName === 'xml'
                const isLt10M = file.size / 1024 / 1024 < 10
                if (!extension) {
                    this.$message({
                        message: '上传文件只能是xml格式!',
                        type: 'warning'
                    })
                    this.fileList = []
                    return false;
                }
                if (!isLt10M) {
                    this.$message({
                        message: '上传文件大小不能超过 10MB!',
                        type: 'warning'
                    })
                    return false;
                }
                this.fileList = fileList.slice(-1);
                const formData = new FormData();
                formData.append("file", file.raw);
                // 在此处编写对接api代码
            },

3. Considering the user experience, new files must be filled in, and the required verification prompt will be removed after the file is uploaded, such as this

1. First define the verification prompt

export default {
 data() {
       let validateFile = (rule, value, callback) => {
      if (this.fileList.length == 0) {
        callback(new Error("请上传文件"));
      } else {
        // 清空校验提示
        this.$refs["dataForm"].clearValidate(["fileList"]);
        callback();
      }
    };
  return {
    rules: [{
      fileList: [{ required: true, validator: validateFile, trigger: "blur" }],
    }]
   }
 }
}

2. Monitor the status in the watch

 watch: {
    fileList: {
      handler(newVal) {
        if (newVal.length) {
          this.$refs["dataForm"].clearValidate(["fileList"]);
        }
      },
      deep: true
    }
  }

3. The complete code is as follows:

<template>
  <div>
    <el-form
          ref="dataForm"
          :inline="true"
          :rules="rules"
          :model="temp"
          label-position="right"
          label-width="130px"
          style="margin: 0 40px"
        >
        <el-form-item label="hbase.site.xml" prop="fileList">
                <el-upload
                  ref="upload"
                  class="upload-demo"
                  action
                  :file-list="fileList"
                  :before-upload="beforeAvatarUpload"
                  :on-remove="handleRemove"
                  :on-change="fileChangeOne"
                  accept
                  :auto-upload="false"
                >
                  <el-button slot="trigger" size="small">选择文件</el-button>
                </el-upload>
              </el-form-item>
   </el-form>
 </div>
</template>
export default {
 data() {
       let validateFile = (rule, value, callback) => {
      if (this.fileList.length == 0) {
        callback(new Error("请上传文件"));
      } else {
        // 清空校验提示
        this.$refs["dataForm"].clearValidate(["fileList"]);
        callback();
      }
    };
  return {
    rules: [{
      fileList: [{ required: true, validator: validateFile, trigger: "blur" }],
    }]
   }
 },
 watch: {
    fileList: {
      handler(newVal) {
        console.log(newVal.length, "newVal.length");
        if (newVal.length) {
          this.$refs["dataForm"].clearValidate(["fileList"]);
        }
      },
      deep: true
    }
  },
 methods: {
     beforeAvatarUpload(file) {
      console.log(file, "file");
      const Xls = file.name.split(".");
      const fileType = ["xml"];
      if (fileType.includes(Xls[1])) {
        return file;
      }
      this.$message({
        type: "error",
        message: `文件类型不符合`,
        offset: 60
      });
      return false;
    },
   handleRemove() {
    this.fileList = []
  },
 async fileChangeOne(file) {
    if (file.status !== "ready") return;
    const fileType = file.name.substring(file.name.lastIndexOf('.') + 1)
    const extension = fileType === 'xml'
    if (!extension) {
        this.$message({
            message: '上传文件只能是xml格式!',
            type: 'warning'
        })
        this.fileList = []
        return false;
    }
    this.fileList = fileList.slice(-1);
    const formData = new FormData();
    formData.append("file", file.raw);
 }
}