el-upload当设置auto-upload为false时，before-upload钩子未触发

一、问题描述

1、上传时，组件是否自动上传，可以设置如下属性

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

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

2、当 :auto-upload="false"，组件

 设置完以后，发现before-upload这个钩子不触发了；

原来的逻辑是
在before-upload这个钩子内部对上传的文件进行限制

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

二、解决办法

利用on-change这个钩子

 :on-change="handleChange"

on-change属性介绍

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

要注意加上一个判断

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

上传文件限制代码如下： 

           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代码
            },

三、考虑到用户体验，新增文件必填，并且  当文件上传以后去掉必填校验提示，譬如这个

1、首先定义校验提示

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、在watch里监听状态

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

3、完整代码如下：

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);
 }
}