---

el-upload实现上传文件夹(批量上传文件)：关键代码在于

this.$refs.uploadFolder.$children[0].$refs.input.webkitdirectory = true;//让el-upload支持上传文件夹

<template>
    <div class="sg-body">
        <el-upload ref="uploadFolder" :show-file-list="false" :headers="headers" :action="actionUrl"
            :before-upload="beforeUpload" :on-success="uploadSuccess" :on-error="uploadError" :on-exceed="exceed" multiple>
            <el-button type="primary">点击上传文件夹</el-button>
        </el-upload>
        <!-- 上传托盘（右下角） -->
        <sgUploadTray v-model="showUploadTray" :data="uploadList" @stopUpload="stopUpload" />
    </div>
</template>
    
<script>
import sgUploadTray from "@/vue/components/sgUploadTray";

export default {
    components: {
        sgUploadTray,
    },
    data() {
        return {
            // 上传----------------------------------------
            headers: {
                kkToken: localStorage.token, //获取token(注意仔细看后端接受token的字段名是不是叫做“token”)
            },
            actionUrl: `${this.$d.API_ROOT_URL}/customer/importCustomerData`,
            fmt: this.$global.resourceTypes.flatMap(v => v.suffixs).filter(Boolean),//所有后缀名 
            dur: 100,
            percent: 100,
            uploadList: [],
            showUploadTray: false,
            // ----------------------------------------
        }
    },
    mounted(d) {
        this.$nextTick(() => {
            this.$refs.uploadFolder.$children[0].$refs.input.webkitdirectory = true;//让el-upload支持上传文件夹
        })
    },
    methods: {
        // 上传文件----------------------------------------------------------------
        showFakeLoading(file) {
            file = this.uploadList.find(v => v.uid == file.uid);
            clearInterval(file.interval);
            file.percent = 0;
            file.interval = setInterval(() => {
                file.percent++;
                file.percent >= 99 && this.hideFakeLoading(file);
            }, this.dur);
        },
        hideFakeLoading(file, { type, tip, color } = {}) {
            file = this.uploadList.find(v => v.uid == file.uid);
            clearInterval(file.interval);
            switch (type) {
                case 'error':
                    file.percent = 0;
                    break;
                case 'success':
                default:
                    file.percent = 100;
            }
            type && (file.type = type);
            tip && (file.tip = tip);
            color && (file.color = color);
        },
        exceed(file, fileList) {
            this.$message.error("上传文件数量太大，分散上传吧！");
        },
        stopUpload(d) {
            this.$refs.uploadFolder.abort();
            console.log(`取消上传`, d);
        },
        //文件上传之前
        beforeUpload(file, id) {
            this.uploadList.unshift({
                interval: false,
                uid: file.uid,
                percent: 0,//加载进度
                name: file.name,
                size: file.size,
                type: file.type,
                webkitRelativePath: file.webkitRelativePath,
                type: '',
                tip: '',
                color: '',
            });
            this.showUploadTray = true;

            // 判断是不是特定的格式________________________
            let isFile = this.fmt.includes(file.name.toLocaleLowerCase().split(".").pop());
            const maxSize = 50; //限制大小
            const isAllowSize = file.size / 1024 / 1024 <= maxSize;
            isFile || this.$message.error("上传文件只能是" + this.fmt + "格式");
            isAllowSize || this.$message.error("上传文件大小不能超过" + maxSize + "MB");
            let allowUpload = isFile && isAllowSize;
            allowUpload ? this.showFakeLoading(file) : this.hideFakeLoading(file, { type: 'error', tip: "上传失败", color: "red" });
            return allowUpload; //若返回false则停止上传
        },
        //上传成功
        uploadSuccess(response, file, fileList) {
            if (response.data && response.data.key) {
                // 下载失败原因的描述文件
                this.$d.customer_downloadImportCustomerExcel({ key: response.data.key }, {
                    s: (d) => {
                        this.hideFakeLoading(file, { type: 'error', tip: "上传失败", color: "red" });
                        this.$g.downloadFile(d, `${file.name}-上传失败原因`, '.xls');
                        this.$message.error(`${file.name}-上传失败，请查看失败原因`);
                        // this.initList();//刷新列表
                        //console.log('上传失败', response, file, fileList);
                    }
                });
            } else if (response.success) {
                // 上传成功了
                this.hideFakeLoading(file, { type: 'success', tip: "上传成功", color: "green" });
                this.$message.success(`“${file.name}上传成功`);
                // this.initList();//刷新列表
                //console.log('上传成功', response, file, fileList);
            } else {
                // 其他失败原因
                this.hideFakeLoading(file, { type: 'error', tip: "上传失败", color: "red" });
                this.$message.error(response.msg);
                //console.log('上传失败', response, file, fileList);
            }
        },
        //上传失败
        uploadError(err, file, fileList) {
            this.hideFakeLoading(file, { type: 'error', tip: "上传失败", color: "red" });
            this.$message.error("上传失败");
            //console.log('上传失败', err, file, fileList);
        },
        // ----------------------------------------

    },
};
</script> 
<style lang="scss" scoped>
.sg-body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    overflow-y: auto;
}
</style>

这里面用到的sgUploadTray组件在这里【sgUploadTray】上传托盘自定义组件，可实时查看上传列表进度_你挚爱的强哥的博客-CSDN博客【sgUploadTray】上传托盘自定义组件，可实时查看上传列表进度。https://blog.csdn.net/qq_37860634/article/details/131721614