一、问题描述

上传时，我不希望组件自动上传，所以我设置了如下属性

:auto-upload="false"

auto-upload属性介绍

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

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

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

原来的逻辑是
我在before-upload这个钩子内部对上传的文件进行限制，但是不走这个生命周期了

二、解决办法

利用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 === 'xls'
                const extension2 = suffName === 'xlsx'
                const isLt10M = file.size / 1024 / 1024 < 10
                if (!extension && !extension2) {
                    this.$message({
                        message: '上传文件只能是 xls、xlsx格式!',
                        type: 'warning'
                    })
                    return false;
                }
                if (!isLt10M) {
                    this.$message({
                        message: '上传文件大小不能超过 10MB!',
                        type: 'warning'
                    })
                    return false;
                }
                return true;
            },