Vue3 + TS 实现批量拖拽 文件夹和文件 组件封装

一、html 代码：

代码中的表格引入了 vxe-table 插件

<Tag /> 是自己封装的说明组件

表格列表这块我使用了插槽来增加扩展性，可根据自己需求，在组件外部做调整

<template>
    <div class="dragUpload">
        <el-dialog v-model="data.visible"
            width="35%"
            center
            :draggable="draggable"
            :destroy-on-close="true"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :before-close="closeDialogFn"
        >
            <template #header>
                <h3>
                    {
  
  { fileData.step === 2 ? '提示：文件超出大小限制' : '拖拽上传'}}
                </h3>
            </template>

            <!-- 文件上传区域 -->
            <div class="drag-box"
                v-if="fileData.step === 1"
                @dragover="handleDragOver"
                @dragleave="handleDragOver"
                @drop="handleDrop"
            >
                <div class="div-text" >
                    <div class="drag-tip">
                        拖拽文件至此区域
                        <span class="click-txt" @click="toUploadFloder">点击上传</span>
                    </div>
                    <div class="btn-wrap">
                        <el-button v-if="singleFile" @click="toUploadFile">上传文件</el-button>
                        <el-button @click="toUploadFloder">上传文件夹</el-button>
                        <input
                            v-if="singleFile"
                            :style="{ display: 'none' }"
                            type="file"
                            ref="fileUploadRef"
                            @change="handleFileChange"
                            multiple
                        />
                        <input
                            :style="{ display: 'none' }"
                            type="file"
                            ref="fileUploadFloderRef"
                            @change="handleFloderChange"
                            webkitdirectory
                            multiple
                        />
                    </div>
                </div>
            </div>

            <!-- 超出限制后，展示的列表 -->
            <div v-if="fileData.step === 2">
                <!-- 组件内默认展示 -->
                <div class="max-h311" v-if="!openSlot">
                    <vxe-table
                        :data="fileData.goBeyondTable"
                        height="100%"
                        :checkbox-config="{
                            showHeader: true,
                            trigger: 'cell'
                        }"
                    >
                        <template #empty>
                            <div class="no-data-box">
                                <i class="icon_noData"></i>
                                <div class="m-t6">暂无数据</div>
                            </div>
                        </template>
                        <vxe-column min-width="180" :title="`${data.fileName || 'SPU'}文件名`">
                            <template #default="{ row }">
                                {
  
  { row[fileData.firstFileName] ? row[fileData.firstFileName] : '--' }}
                            </template>
                        </vxe-column>

                        <vxe-column min-width="111" title="大小">
                            <template #default="{ row }">
                                {
  
  { row.size ? row.size : '--' }} MB
                            </template>
                        </vxe-column>

                        <vxe-column width="100" title="操作" :visible="fileData.goBeyondTable.length > 1">
                            <template #default="{ $rowIndex, row }">
                                <el-tooltip
                                    content="移除"
                                    placement="top"
                                    :hide-after="0"
                                >
                                    <a class="icon_delete f-s18"
                                        href="javscript:"
                                        @click="handleDelete($rowIndex, row)">
                                    </a>
                                </el-tooltip>
                            </template>
                        </vxe-column>
                    </vxe-table>
                </div>
                <!-- 插槽，可使用外部传入 -->
                <template v-else>
                    <slot name="errorTable"></slot>
                </template>
            </div>

            <Tag class="m-t12"
                v-if="data.fileSize"
                :content="fileData.step === 1 ? `文件大小不能超过 ${data.fileSize} MB` : `文件大小不能超过 ${data.fileSize}MB，目前文件大小 ${fileData.allSize} MB`"
            />

            <template #footer v-if="fileData.step === 2">
                <div class="dialog-footer">
                    <el-button @click="closeDialogFn">取消</el-button>
                    <!-- 默认使用内部提交逻辑 -->
                    <template v-if="!openSlot">
                        <el-button type="primary" @click="handleUploadToServer(true)">
                        提交
                        </el-button>
                    </template>
                    <!-- 开启插槽，则使用外部自定义 -->
                    <template v-else>
                        <slot name="footerBtn"></slot>
                    </template>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

二、js 代码：

目前支持校验上传的文件类型有三种：

image：图片类型；video：视频类型；excel：表格类型

这块主要思路是：将文件夹判断后进行递归，获取出文件夹中的文件出来，最后类似单个文件上传，然后将文件流进行遍历 append 进创建的 FormData 对象。具体方法看：readFiles() 和 handleUploadToServer()

<script lang="ts" setup>
import { reactive, ref, getCurrentInstance } from 'vue';

const { proxy }: any = getCurrentInstance();
const $tool = proxy.$tool;

const props = defineProps({
    // 组件参数配置
    data: {
        type: Object,
        default: () => ({
            // fileSize: 100, // 文件大小限制
            // fileType: '', //定义上传的文件类型 = image：图片类型；video：视频类型；excel：表格类型
            // type: []  图片: 'png', 'jpg', 'jpeg'; 视频: 'mp4', 'avi', 'mov'; excel表格: 'xlsx', 'xls'
            // fileName: '', // 超出后列表展示的文件名：不传默认为SPU
        }),
    },
    // 是否支持窗口拖拽，默认true
    draggable: {
        type: Boolean,
        default: true
    },
    // 是否支持打开 file 单文件上传，不传默认false
    singleFile: {
        type: Boolean,
        default: false
    },
    //是否需要开启：列表上传失败 和 提交按钮插槽：默认不开启，展示组件内的失败列表 和 提交逻辑
    openSlot: {
        type: Boolean,
        default: false
    }
});

/**
 * @param dragUploadAxiosFn 上传接口抛出，外部做处理，不与组件内部逻辑耦合
 * @param dragUploadErrorTable 超出限制后，展示的列表插槽抛出，外部做处理，不与组件内部逻辑耦合
 */
const emit = defineEmits(['dragUploadAxiosFn', 'dragUploadErrorTable']);

const fileUploadRef = ref();
const fileUploadFloderRef = ref();

const fileData: any = reactive({
    step: 1, // 步骤： 1：文件拖拽上传；2：文件超出提示
    uploadList: [], //上传的文件列表
    waitUploadList: [], //存储待上传的文件列表
    fileSizeList: [], //存储遍历出来文件里面所有的图片路径及大小
    goBeyondTable: [], //超出限制后，将遍历项还原成文件夹项展示的列表
    allSize: 0, //文件总大小 MB
    firstFileName: 'pathName0' //第一列字段：key
});

/*文件上传input*/
const toUploadFile = () => {
    fileUploadRef.value.click();
};

/*文件夹上传input*/
const toUploadFloder = () => {
    fileUploadFloderRef.value.click();
};

/*选择文件改变*/
const handleFileChange = (e: any) => {
    if (e.target.files) {
        let filesList: any = Array.from(e.target.files);

        filesList.forEach((item: any) => {
            let size = item.size / 1024 / 1024;
            fileData.allSize += size;

            let obj: any = getPath(item.name);
            changeFileSizeList(item, obj);

        });
        fileData.allSize = fileData.allSize.toFixed(2); // 文件总大小 MB
        fileData.waitUploadList = filesList;

        if (!fileLimitFn(fileData.fileSizeList)) return; // 校验方法
        handleUploadToServer(); //上传文件到服务器
    }
};

/*文件夹目录上传*/
const handleFloderChange = (e: any) => {
    if (e.target.files) {
        let filesList: any = Array.from(e.target.files);

        filesList.forEach((item: any) => { 
            let size = item.size / 1024 / 1024;
            fileData.allSize += size;

            let obj: any = getPath(item.webkitRelativePath); // 通过路径获取名称方法
            changeFileSizeList(item, obj);
        });

        filesList.reverse(); // 反转数组，保证最先选择的文件排在最后面
        fileData.allSize = fileData.allSize.toFixed(2); // 文件总大小 MB
        fileData.waitUploadList = filesList;

        if (!fileLimitFn(fileData.fileSizeList)) return; // 校验方法
        handleUploadToServer(); //上传文件到服务器
    }
};

// 拖放进入目标区域
const handleDragOver = (event) => {
    event.preventDefault();
};

// 拖拽放置
const handleDrop = async (event) => {
    event.preventDefault();
    const files = [];
    const promises: any[] = [];

    for (const item of event.dataTransfer.items) {
        const entry: any = item.webkitGetAsEntry();
        
        if (!entry.isDirectory && !props.singleFile) {
            proxy.$message.error(`只支持文件夹上传，不支持单个文件上传！`);
            return;
        }

        promises.push(readFiles(entry));
    }
    const resultFilesArrays = await Promise.all(promises); // 等待所有文件读取完成
    fileData.waitUploadList = resultFilesArrays.flat();

    if (!fileLimitFn(fileData.fileSizeList)) return; // 校验方法
    handleUploadToServer(); //上传文件到服务器
};

//文件各种限制判断方法封装
const fileLimitFn = (fileSizeList: any) => {
    //文件类型判断和格式限制
    if (props.data.type) {
        if (!testingFileType(fileSizeList, props.data.fileType)) return false;
    }

    //文件大小超出限制
    if (props.data.fileSize) {
        if (!fileSizeLimit(fileSizeList)) { 
            fileData.goBeyondTable = getGoBeyondTable(fileSizeList);
            fileData.step = 2;
            return false;
        }
    }

    return true;
};

/**
 * 验证文件类型是否为允许的上传的类型
 * @param fileSizeList 文件列表
 * @param type  image：图片类型；video：视频类型；excel：表格类型
 * @returns 如果文件类型不符合要求，返回 false；否则返回 true
 */
const testingFileType = (fileSizeList: any, type: string) => {
    let message: string;
    switch (type) {
        case 'image':
            message = `图片只能上传 ${props.data.type} 格式`;
            break;
        case 'video':
            message = `视频只能上传 ${props.data.type} 格式`;
            break;
        case 'excel':
            message = `Excel文件只能上传 ${props.data.type} 格式`;
            break;
        default:
            break;
    }

    let filterList: any = fileSizeList.filter((item: any) => !props.data.type.includes(item.type));
    if (filterList.length) {
        //错误的文件，不管里面有没有正确格式的，一律清除
        fileData.fileSizeList = [];
        fileData.allSize = 0;
        proxy.$message.error(message);
        return false;
    };
    return true;
};

//文件超出限制
const fileSizeLimit = (fileSizeList: any) => {
    let allSize = fileSizeList.reduce((accumulator, currentValue) => {
        if (currentValue) {
            return accumulator + currentValue.size;
        }
        return accumulator;
    }, 0);

    let fileSize = props.data.fileSize * 1024 * 1024;
    fileData.allSize = (allSize / 1024 / 1024).toFixed(2); //存储文件总大小 MB

    if (allSize > fileSize) {
        proxy.$message.error(`文件大小不能超过 ${props.data.fileSize} MB`);
        emit('dragUploadErrorTable', fileData);
        return false;
    }
    return true;
};

// 操作数据：文件超出后，展示的列表
const getGoBeyondTable = (fileSizeList: any) => {
    // 遍历，相同第一列为一项，size累加
    let result: any = fileSizeList.reduce((accumulator, current) => {
        if (accumulator[current[fileData.firstFileName]]) { //如果已经存在，则累加size
            accumulator[current[fileData.firstFileName]].size += current.size;
        } else {
            accumulator[current[fileData.firstFileName]] = { ...current };
        }
        return accumulator;
    }, {});
    
    // 将结果对象转换回数组
    result = Object.values(result);
    // 处理size为MB单位
    result.forEach((item: any) => {
        item.size = (item.size / 1024 / 1024).toFixed(2);
    });
    return result;
};

//移除超出文件列表的项
const handleDelete = (rowIndex: number, row: any) => {
    fileData.goBeyondTable.splice(rowIndex, 1);

    fileData.allSize = (fileData.allSize - row.size).toFixed(2); //更新总大小MB

    fileData.fileSizeList = fileData.fileSizeList.filter((item: any) => item[fileData.firstFileName] !== row[fileData.firstFileName]);

    fileData.waitUploadList = fileData.waitUploadList.filter((item: any) => item[fileData.firstFileName] !== row[fileData.firstFileName]);
};

/*请求上传到服务器*/
const handleUploadToServer = (click?: boolean) => {
    fileData.uploadList = fileData.waitUploadList;
    // 再次提交时验证文件大小是否超出限制
    if (click && fileData.allSize > props.data.fileSize) {
        proxy.$message.error(`文件大小不能超过 ${props.data.fileSize} MB`);
        return;
    }

    let formData = new FormData();
    fileData.uploadList.forEach((item: any) => {
        formData.append(`${item.filePathName}`, item);
    });
    
    // // 遍历FormData对象并打印其内容：查看FormData对象数据是否正确
    // for (let [key, value] of formData.entries()) {
    //     console.log(`${key}: ${value}`);
    // }

    emit('dragUploadAxiosFn', formData); //上传参数抛出，外部做操作，不在组件做耦合
};

//此方法：如果是文件夹，则会递归调用自己，所以最后都会走 else 的逻辑
const readFiles = async (item: any) => { 
    if (item.isDirectory) {
        // 是一个文件夹
        const directoryReader = item.createReader();
        // readEntries是一个异步方法
        const entries: any[] = await new Promise((resolve, reject) => {
            directoryReader.readEntries(resolve, reject);
        });
        let files = [];
        for (const entry of entries) {
            const resultFiles: any = await readFiles(entry);
            files = files.concat(resultFiles);
        }
        return files;
    } else {
        // file也是一个异步方法
        const file = await new Promise((resolve, reject) => {
            item.file(resolve, reject);
        });
        let obj: any = getPath(item.fullPath); //通过路径获取名称方法
        changeFileSizeList(file, obj);

        return [file];
    }
};

//更改 fileData.fileSizeList 的值：公共
const changeFileSizeList = (file: any, obj: any) => {
    file.filePathName = obj.filePathName; //添加路径名称
    file[fileData.firstFileName] = obj.pathObj[fileData.firstFileName]; //添加第一列文件名
    file.pathObj = obj.pathObj;

    let index = file.name.lastIndexOf('.');
    fileData.fileSizeList.push({ //添加图片路径、大小、名称
        filePathName: obj.filePathName,
        size: file.size,
        type: file.name.substring(index + 1),
        ...obj.pathObj
    });
};

//通过路径获取名称方法：公共
const getPath = (path: string) => {
    let filePathName: any = path;  // 传给后端的全路径
    
    if (path.startsWith('/')) { // 如果路径以斜杠开头，则删除第一个斜杠
        filePathName = path.slice(1);
    }

    let parts = filePathName.split('/'); // 路径分割成数组
    let pathObj = {}; // 存储每个部分

    for (let i = 0; i < parts.length; i++) {
        if (parts[i] !== '') { // 跳过空字符串（如果路径以 / 开头或结尾）
            pathObj['pathName' + (i)] = parts[i];
        }
    }
    return {
        filePathName: filePathName,
        pathObj: pathObj
    }
};


//关闭事件
const closeDialogFn = () => {
    if (fileData.step === 1) {
        props.data.visible = false; //关闭弹窗
        return;
    }
    proxy.$messageBox({
        title: '关闭',
        message: '关闭后不会保留您所做的更改，确定关闭吗？',
        callback: (value: string) => {
            //confirm=确认；cancel=取消
            if (value === 'confirm') {
                fileData.step = 1;
                props.data.visible = false; //关闭弹窗
            }
        }
    });
};
</script>

三、css 代码：

<style lang="scss" scoped>
.drag-box {
    position: relative;
    .progress-bar {
        position: absolute;
        z-index: 100;
        width: 100%;
        top: 0;
        left: 0px;
        right: 0px;
        bottom: -5px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(255, 255, 255, 0.8);
        :deep(.el-progress.el-progress--line) {
            width: 100%;
            margin-left: 10px;
        }
    }

    .uploaded-list-wrap {
        max-height: 200px;
        overflow-y: auto;
        .uploaded-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            margin-bottom: 3px;
            .text-content {
                width: 80%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .icon {
                width: 25px;
                height: 25px;
            }
            .success-icon {
                display: block;
            }
            .delete-icon {
                display: none;
            }
            &:hover {
                .success-icon {
                    display: none;
                }
                .delete-icon {
                    display: block;
                }
            }
        }
    }
}

.div-text {
    width: 100%;
    height: 250px;
    border: 1px dashed #00b7ee;
    border-radius: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    .click-txt {
        color: #00b7ee;
        cursor: pointer;
    }
    .btn-wrap {
        margin-top: 20px;
    }
}

.min-h311 {
    min-height: 311px;
}

.max-h311 {
    max-height: 311px;
}

:deep(.el-dialog .el-dialog__header) {
    padding: 12px 16px;
}

:deep(.el-dialog .el-dialog__body) {
    padding: 15px 30px 20px;
}

</style>

四、vue 页面中使用：

<!-- 拖拽上传 -->
<DragUpload v-if="dragUpload.visible"
            :data="dragUpload"
            @dragUploadAxiosFn="dragUploadAxiosFn"
/>

const dragUpload: any = reactive({
    visible: false,
    fileSize: 100, // 单位字节 MB
    fileType: 'image', //定义上传的文件类型 = image：图片类型；video：视频类型；excel：表格类型
    type: ['png', 'jpg', 'jpeg'],
    fileName: 'SPU', // 超出后列表展示的文件名
});

 五、上传到后端接口的参数：

 六、效果图，如下：

七、额外补充，后端接收文件流的方法：