Element UI 上传文件 el-upload —— 手动上传文件，限制上传文件数量，文件类型校验等

:auto-upload="false"

this.$refs.upload.submit();

accept=".xlsx,.xls"

:limit="1"

:on-exceed='limitCheck'

// 选择的文件超出限制的文件总数量时触发
limitCheck() {
    this.$message.warning('每次只能上传一个文件')
},

:before-upload="beforeUpload"

// 文件上传前的校验 —— 常见的校验有：校验文件类型，文件大小
beforeUpload(file) {
    // 允许上传的文件格式列表
    let acceptList = ["xlsx", "xls"]
    // 根据文件名获取文件的后缀名
    let fileType = file.name.split('.').pop().toLowerCase()
    // 判断文件格式是否符合要求
    if (acceptList.indexOf(fileType) === -1) {
        this.$message.error('只能上传 xlsx/xls 格式的文件 !');
        return false
    }
    // 判断文件大小是否符合要求
    if (file.size / 1024 / 1024 > 1) {
        this.$message.error('上传文件大小不能超过 1M !');
        return false
    }
}

<template>
    <div style="padding: 30px">
        <el-upload
                ref="upload"
                accept=".xlsx,.xls"
                :limit="1"
                :on-exceed='limitCheck'
                :file-list="fileList"
                :on-remove="removeFile"
                :on-change="fileChange"
                :auto-upload="false"
                :before-upload="beforeUpload"
                action="https://jsonplaceholder.typicode.com/posts/"
        >
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <el-button :disabled="fileList.length<1" style="margin-left: 10px;" size="small" type="success"
                       @click="submitUpload">上传到服务器
            </el-button>
            <div slot="tip" class="el-upload__tip">只能上传 xlsx/xls 文件，且不超过1M</div>
        </el-upload>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                fileList: []
            }
        },
        methods: {
            // 选择文件、移除文件、上传文件成功/失败后，都会触发
            fileChange(file, fileList) {
                this.fileList = fileList
            },
            // 移除文件时触发
            removeFile(file, fileList) {
                this.fileList = fileList
            },
            // 选择的文件超出限制的文件总数量时触发
            limitCheck() {
                this.$message.warning('每次只能上传一个文件')
            },
            // 点击上传按钮
            submitUpload() {
                // 将文件上传到服务器，先触发beforeUpload事件，对上传的文件进行校验，校验通过后才会上传
                this.$refs.upload.submit();
            },
            // 文件上传前的校验 —— 常见的校验有：校验文件类型，文件大小
            beforeUpload(file) {
                // 允许上传的文件格式列表
                let acceptList = ["xlsx", "xls"]
                // 根据文件名获取文件的后缀名
                let fileType = file.name.split('.').pop().toLowerCase()
                // 判断文件格式是否符合要求
                if (acceptList.indexOf(fileType) === -1) {
                    this.$message.error('只能上传 xlsx/xls 格式的文件 !');
                    return false
                }
                // 判断文件大小是否符合要求
                if (file.size / 1024 / 1024 > 1) {
                    this.$message.error('上传文件大小不能超过 1M !');
                    return false
                }
            }
        },
    }
</script>
<style scoped>
</style>