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><inputv-if="singleFile":style="{ display: 'none' }"type="file"ref="fileUploadRef"@change="handleFileChange"multiple/><input:style="{ display: 'none' }"type="file"ref="fileUploadFloderRef"@change="handleFloderChange"webkitdirectorymultiple/></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-tooltipcontent="移除"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="!autoUpload || fileData.step === 2"><div class="dialog-footer"><el-button @click="closeDialogFn">取消</el-button><!-- 默认使用内部提交逻辑 --><template v-if="!openSlot"><el-button type="primary" @click="handleUploadToServer(true)">{{ fileData.step === 1 ? '上传' : '提交' }}</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, // 文件大小限制/*** type 对象为空或者不传，则不限制上传类型 */// type: {   //     自定义上传的文件类型 = image：图片类型；video：视频类型；excel：表格类型//     image: ['png', 'jpg', 'jpeg'],//     video: ['mp4', 'avi', 'mov'],//     excel: ['xlsx', 'xls']// },/*** 格式错误自定义提示：根据 type 来，但格式需要写成 ${'type中的key'}，因组件内部代码采用：查找 ${} 进行替换；不传则使用组件内默认提示 */// formatMessage: {//     'image': '只支持上传图片：${image} 格式',//     'image,video': '支持上传图片：${image} 格式，视频：${video} 格式',//     'image,video,excel': '支持上传图片：${image} 格式，视频：${video} 格式，Excel文件：${excel} 格式'// }// limit: 0, // 允许上传文件的最大数量，0或不传默认无限制// fileName: '', // 超出后列表展示的文件名：不传默认为SPU}),},// 是否支持窗口拖拽，默认truedraggable: {type: Boolean,default: true},// 是否自动上传文件，默认trueautoUpload: {type: Boolean,default: true},// 是否支持打开 file 单文件上传，不传默认falsesingleFile: {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, //文件总大小 MBfirstFileName: '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); // 文件总大小 MBfileData.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); // 文件总大小 MBfileData.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)) return false;}//文件数量超出限制if (props.data.limit && props.data.limit !== 0) {if (!fileLimit(fileSizeList)) 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：表格类型* @param formatMessage 外部传入的自定义提示信息，替换默认提示信息或者新增进入提示信息* @returns 如果文件类型不符合要求，返回 false；否则返回 true*/
const testingFileType = (fileSizeList: any) => {let type: any = props.data.type;if (Object.keys(type).length === 0) return true; // type 对象为空或者不传，则不限制上传类型// 使用 Object.values 获取对象值的数组，然后使用 flatMap 合并所有数组const typeList = Object.values(type).flatMap((array: any) => array);// 获取所有键的字符串表示，例如 "image,video,excel"const keysString = Object.keys(type).join(','); const messageTemplates = {'image': '只支持上传图片：${image} 格式','video': '只支持上传视频：${video} 格式','excel': '只支持上传Excel文件：${excel} 格式','image,video': '支持上传图片：${image} 格式，视频：${video} 格式','image,excel': '支持上传图片：${image} 格式，Excel文件：${excel} 格式','video,excel': '支持上传视频：${video} 格式，Excel文件：${excel} 格式','image,video,excel': '支持上传图片：${image} 格式，视频：${video} 格式，Excel文件：${excel} 格式'};// 外部传入：自定义提示信息替换成外部传入的if (props.data.formatMessage && Object.keys(props.data.formatMessage).length) {let msg: any = props.data.formatMessage;for (const key in msg) {if (messageTemplates.hasOwnProperty(key)) {// 如果 messageTemplates 中存在该键，则替换其值messageTemplates[key] = msg[key];} else {// 不存在则增加进去messageTemplates[key] = msg[key];}}}// 正则：查找 ${}，后进行替换let message: string = '';if (messageTemplates[keysString]) {message = messageTemplates[keysString].replace(/\$\{(\w+)\}/g, (_, match) => type[match].join(', '));} else {message = `不支持上传该类型的文件：${keysString}，请重新上传！`;}//过滤不符合要求的文件类型let filterList: any = fileSizeList.filter((item: any) => !typeList.includes(item.type));if (filterList.length) {//错误的文件，不管里面有没有正确格式的，一律清除fileData.fileSizeList = [];fileData.allSize = 0;proxy.$message.error(message);return false;};return true;
};//文件数量超出限制
const fileLimit = (fileSizeList: any) => {if (fileSizeList.length > props.data.limit) {proxy.$message.error(`文件数量不能超过 ${props.data.limit} 个，请重新上传！`);fileData.fileSizeList = [];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); //存储文件总大小 MBif (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]]) { //如果已经存在，则累加sizeaccumulator[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); //更新总大小MBfileData.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) => {let autoUpload: boolean = props.autoUpload;if (click && fileData.step === 1) autoUpload = true; //手动上传if (!autoUpload && fileData.step === 1) return; //不自动上传，则不执行fileData.uploadList = fileData.waitUploadList;// 再次提交时验证文件大小是否超出限制if (click && fileData.step === 2 && 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) => {try {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});} catch {proxy.$message.error(`文件读取路径失败，请重新上传文件！`);}
};//通过路径获取名称方法：公共
const getPath = (path: string) => {try {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}} catch {proxy.$message.error(`文件读取路径失败，请重新上传文件！`);}
};//关闭事件
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 #409effc2;;border-radius: 10px;box-sizing: border-box;display: flex;flex-direction: column;justify-content: center;align-items: center;font-size: 18px;background-color: #cccccc1c;.click-txt {color: #409effc2;;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 30px;display: flex;justify-content: space-between;
}:deep(.el-dialog .el-dialog__body) {padding: 8px 30px 11px;
}:deep(.el-dialog .el-dialog__footer) {padding: 6px 30px 14px;
}.dialog-footer {display: flex;justify-content: flex-end;
}.color-409 {color: #409effc2;;
}</style>

四、vue 页面中使用：

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

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

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

 六、效果图，如下：

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