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

一、html 代码：

代码中的表格引入了 vxe-table 插件
<Tag /> 是自己封装的说明组件
表格列表这块我使用了插槽来增长扩展性，可根据自己需求，在组件外部做调解

1. <template>
2.     <div class="dragUpload">
3.         <el-dialog v-model="data.visible"
4.             width="35%"
5.             center
6.             :draggable="draggable"
7.             :destroy-on-close="true"
8.             :close-on-click-modal="false"
9.             :close-on-press-escape="false"
10.             :before-close="closeDialogFn"
11.         >
12.             <template #header>
13.                 <h3>
14.                     {
15.   
16.   { fileData.step === 2 ? '提示：文件超出大小限制' : '拖拽上传'}}
17.                 </h3>
18.             </template>
20.             <!-- 文件上传区域 -->
21.             <div class="drag-box"
22.                 v-if="fileData.step === 1"
23.                 @dragover="handleDragOver"
24.                 @dragleave="handleDragOver"
25.                 @drop="handleDrop"
26.             >
27.                 <div class="div-text" >
28.                     <div class="drag-tip">
29.                         拖拽文件至此区域
30.                         <span class="click-txt" @click="toUploadFloder">点击上传</span>
31.                     </div>
32.                     <div class="btn-wrap">
33.                         <el-button v-if="singleFile" @click="toUploadFile">上传文件</el-button>
34.                         <el-button @click="toUploadFloder">上传文件夹</el-button>
35.                         <input
36.                             v-if="singleFile"
37.                             :style="{ display: 'none' }"
38.                             type="file"
39.                             ref="fileUploadRef"
40.                             @change="handleFileChange"
41.                             multiple
42.                         />
43.                         <input
44.                             :style="{ display: 'none' }"
45.                             type="file"
46.                             ref="fileUploadFloderRef"
47.                             @change="handleFloderChange"
48.                             webkitdirectory
49.                             multiple
50.                         />
51.                     </div>
52.                 </div>
53.             </div>
55.             <!-- 超出限制后，展示的列表 -->
56.             <div v-if="fileData.step === 2">
57.                 <!-- 组件内默认展示 -->
58.                 <div class="max-h311" v-if="!openSlot">
59.                     <vxe-table
60.                         :data="fileData.goBeyondTable"
61.                         height="100%"
62.                         :checkbox-config="{
63.                             showHeader: true,
64.                             trigger: 'cell'
65.                         }"
66.                     >
67.                         <template #empty>
68.                             <div class="no-data-box">
69.                                 <i class="icon_noData"></i>
70.                                 <div class="m-t6">暂无数据</div>
71.                             </div>
72.                         </template>
73.                         <vxe-column min-width="180" :title="`${data.fileName || 'SPU'}文件名`">
74.                             <template #default="{ row }">
75.                                 {
76.   
77.   { row[fileData.firstFileName] ? row[fileData.firstFileName] : '--' }}
78.                             </template>
79.                         </vxe-column>
81.                         <vxe-column min-width="111" title="大小">
82.                             <template #default="{ row }">
83.                                 {
84.   
85.   { row.size ? row.size : '--' }} MB
86.                             </template>
87.                         </vxe-column>
89.                         <vxe-column width="100" title="操作" :visible="fileData.goBeyondTable.length > 1">
90.                             <template #default="{ $rowIndex, row }">
91.                                 <el-tooltip
92.                                     content="移除"
93.                                     placement="top"
94.                                     :hide-after="0"
95.                                 >
96.                                     <a class="icon_delete f-s18"
97.                                         href="javscript:"
98.                                         @click="handleDelete($rowIndex, row)">
99.                                     </a>
100.                                 </el-tooltip>
101.                             </template>
102.                         </vxe-column>
103.                     </vxe-table>
104.                 </div>
105.                 <!-- 插槽，可使用外部传入 -->
106.                 <template v-else>
107.                     <slot name="errorTable"></slot>
108.                 </template>
109.             </div>
111.             <Tag class="m-t12"
112.                 v-if="data.fileSize"
113.                 :content="fileData.step === 1 ? `上传文件总大小不能超过 ${data.fileSize} MB` : `上传文件总大小不能超过 ${data.fileSize} MB，当前文件总大小 ${fileData.allSize} MB`"
114.             />
116.             <template #footer v-if="!autoUpload || fileData.step === 2">
117.                 <div class="dialog-footer">
118.                     <el-button @click="closeDialogFn">取消</el-button>
119.                     <!-- 默认使用内部提交逻辑 -->
120.                     <template v-if="!openSlot">
121.                         <el-button type="primary" @click="handleUploadToServer(true)">
122.                             {
123.   
124.   { fileData.step === 1 ? '上传' : '提交' }}
125.                         </el-button>
126.                     </template>
127.                     <!-- 开启插槽，则使用外部自定义 -->
128.                     <template v-else>
129.                         <slot name="footerBtn"></slot>
130.                     </template>
131.                 </div>
132.             </template>
133.         </el-dialog>
134.     </div>
135. </template>

复制代码

二、js 代码：

目前支持校验上传的文件类型有三种：
image：图片类型；video：视频类型；excel：表格类型
这块重要思路是：将文件夹判定后举行递归，获取出文件夹中的文件出来，末了雷同单个文件上传，然后将文件流举行遍历 append 进创建的 FormData 对象。具体方法看：readFiles() 和 handleUploadToServer()

1. <script lang="ts" setup>
2. import { reactive, ref, getCurrentInstance } from 'vue';
4. const { proxy }: any = getCurrentInstance();
5. const $tool = proxy.$tool;
7. const props = defineProps({
8.     // 组件参数配置
9.     data: {
10.         type: Object,
11.         default: () => ({
12.             // fileSize: 100, // 文件大小限制
13.             /*** type 对象为空或者不传，则不限制上传类型 */
14.             // type: {   
15.             //     自定义上传的文件类型 = image：图片类型；video：视频类型；excel：表格类型
16.             //     image: ['png', 'jpg', 'jpeg'],
17.             //     video: ['mp4', 'avi', 'mov'],
18.             //     excel: ['xlsx', 'xls']
19.             // },
20.             /*** 格式错误自定义提示：根据 type 来，但格式需要写成 ${'type中的key'}，因组件内部代码采用：查找 ${} 进行替换；不传则使用组件内默认提示 */
21.             // formatMessage: {
22.             //     'image': '只支持上传图片：${image} 格式',
23.             //     'image,video': '支持上传图片：${image} 格式，视频：${video} 格式',
24.             //     'image,video,excel': '支持上传图片：${image} 格式，视频：${video} 格式，Excel文件：${excel} 格式'
25.             // }
26.             // limit: 0, // 允许上传文件的最大数量，0或不传默认无限制
27.             // fileName: '', // 超出后列表展示的文件名：不传默认为SPU
28.         }),
29.     },
30.     // 是否支持窗口拖拽，默认true
31.     draggable: {
32.         type: Boolean,
33.         default: true
34.     },
35.     // 是否自动上传文件，默认true
36.     autoUpload: {
37.         type: Boolean,
38.         default: true
39.     },
40.     // 是否支持打开 file 单文件上传，不传默认false
41.     singleFile: {
42.         type: Boolean,
43.         default: false
44.     },
45.     //是否需要开启：列表上传失败 和 提交按钮插槽；默认不开启，展示组件内的失败列表 和 提交逻辑
46.     openSlot: {
47.         type: Boolean,
48.         default: false
49.     }
50. });
52. /**
53. * @param dragUploadAxiosFn 上传参数抛出，外部做处理，不与组件内部逻辑耦合
54. * @param dragUploadErrorTable 超出限制后，展示的列表插槽抛出，外部做处理，不与组件内部逻辑耦合
55. */
56. const emit = defineEmits(['dragUploadAxiosFn', 'dragUploadErrorTable']);
58. const fileUploadRef = ref();
59. const fileUploadFloderRef = ref();
61. const fileData: any = reactive({
62.     step: 1, // 步骤： 1：文件拖拽上传；2：文件超出提示
63.     uploadList: [], //上传的文件列表
64.     waitUploadList: [], //存储待上传的文件列表
65.     fileSizeList: [], //存储遍历出来文件里面所有的图片路径及大小
66.     goBeyondTable: [], //超出限制后，将遍历项还原成文件夹项展示的列表
67.     allSize: 0, //文件总大小 MB
68.     firstFileName: 'pathName0' //第一列字段：key
69. });
71. /*文件上传input*/
72. const toUploadFile = () => {
73.     fileUploadRef.value.click();
74. };
76. /*文件夹上传input*/
77. const toUploadFloder = () => {
78.     fileUploadFloderRef.value.click();
79. };
81. /*选择文件改变*/
82. const handleFileChange = (e: any) => {
83.     if (e.target.files) {
84.         let filesList: any = Array.from(e.target.files);
86.         filesList.forEach((item: any) => {
87.             let size = item.size / 1024 / 1024;
88.             fileData.allSize += size;
90.             let obj: any = getPath(item.name);
91.             changeFileSizeList(item, obj);
93.         });
94.         fileData.allSize = fileData.allSize.toFixed(2); // 文件总大小 MB
95.         fileData.waitUploadList = filesList;
97.         if (!fileLimitFn(fileData.fileSizeList)) return; // 校验方法
98.         handleUploadToServer(); //上传文件到服务器
99.     }
100. };
102. /*文件夹目录上传*/
103. const handleFloderChange = (e: any) => {
104.     if (e.target.files) {
105.         let filesList: any = Array.from(e.target.files);
107.         filesList.forEach((item: any) => {
108.             let size = item.size / 1024 / 1024;
109.             fileData.allSize += size;
111.             let obj: any = getPath(item.webkitRelativePath); // 通过路径获取名称方法
112.             changeFileSizeList(item, obj);
113.         });
115.         filesList.reverse(); // 反转数组，保证最先选择的文件排在最后面
116.         fileData.allSize = fileData.allSize.toFixed(2); // 文件总大小 MB
117.         fileData.waitUploadList = filesList;
119.         if (!fileLimitFn(fileData.fileSizeList)) return; // 校验方法
120.         handleUploadToServer(); //上传文件到服务器
121.     }
122. };
124. // 拖放进入目标区域
125. const handleDragOver = (event) => {
126.     event.preventDefault();
127. };
129. // 拖拽放置
130. const handleDrop = async (event) => {
131.     event.preventDefault();
132.     const files = [];
133.     const promises: any[] = [];
135.     for (const item of event.dataTransfer.items) {
136.         const entry: any = item.webkitGetAsEntry();
137.         
138.         if (!entry.isDirectory && !props.singleFile) {
139.             proxy.$message.error(`只支持文件夹上传，不支持单个文件上传！`);
140.             return;
141.         }
143.         promises.push(readFiles(entry));
144.     }
145.     const resultFilesArrays = await Promise.all(promises); // 等待所有文件读取完成
146.     fileData.waitUploadList = resultFilesArrays.flat();
148.     if (!fileLimitFn(fileData.fileSizeList)) return; // 校验方法
149.     handleUploadToServer(); //上传文件到服务器
150. };
152. //文件各种限制判断方法封装
153. const fileLimitFn = (fileSizeList: any) => {
154.     //文件类型判断和格式限制
155.     if (props.data.type) {
156.         if (!testingFileType(fileSizeList)) return false;
157.     }
159.     //文件数量超出限制
160.     if (props.data.limit && props.data.limit !== 0) {
161.         if (!fileLimit(fileSizeList)) return false;
162.     }
164.     //文件大小超出限制
165.     if (props.data.fileSize) {
166.         if (!fileSizeLimit(fileSizeList)) {
167.             fileData.goBeyondTable = getGoBeyondTable(fileSizeList);
168.             fileData.step = 2;
169.             return false;
170.         }
171.     }
173.     return true;
174. };
176. /**
177. * 验证文件类型是否为允许的上传的类型
178. * @param fileSizeList 文件列表
179. * @param type  image：图片类型；video：视频类型；excel：表格类型
180. * @param formatMessage 外部传入的自定义提示信息，替换默认提示信息或者新增进入提示信息
181. * @returns 如果文件类型不符合要求，返回 false；否则返回 true
182. */
183. const testingFileType = (fileSizeList: any) => {
184.     let type: any = props.data.type;
185.     if (Object.keys(type).length === 0) return true; // type 对象为空或者不传，则不限制上传类型
187.     // 使用 Object.values 获取对象值的数组，然后使用 flatMap 合并所有数组
188.     const typeList = Object.values(type).flatMap((array: any) => array);
189.     // 获取所有键的字符串表示，例如 "image,video,excel"
190.     const keysString = Object.keys(type).join(',');
191.     const messageTemplates = {
192.         'image': '只支持上传图片：${image} 格式',
193.         'video': '只支持上传视频：${video} 格式',
194.         'excel': '只支持上传Excel文件：${excel} 格式',
195.         'image,video': '支持上传图片：${image} 格式，视频：${video} 格式',
196.         'image,excel': '支持上传图片：${image} 格式，Excel文件：${excel} 格式',
197.         'video,excel': '支持上传视频：${video} 格式，Excel文件：${excel} 格式',
198.         'image,video,excel': '支持上传图片：${image} 格式，视频：${video} 格式，Excel文件：${excel} 格式'
199.     };
201.     // 外部传入：自定义提示信息替换成外部传入的
202.     if (props.data.formatMessage && Object.keys(props.data.formatMessage).length) {
203.         let msg: any = props.data.formatMessage;
204.         for (const key in msg) {
205.             if (messageTemplates.hasOwnProperty(key)) {
206.                 // 如果 messageTemplates 中存在该键，则替换其值
207.                 messageTemplates[key] = msg[key];
208.             } else {
209.                 // 不存在则增加进去
210.                 messageTemplates[key] = msg[key];
211.             }
212.         }
213.     }
215.     // 正则：查找 ${}，后进行替换
216.     let message: string = '';
217.     if (messageTemplates[keysString]) {
218.         message = messageTemplates[keysString].replace(/\$\{(\w+)\}/g, (_, match) => type[match].join(', '));
219.     } else {
220.         message = `不支持上传该类型的文件：${keysString}，请重新上传！`;
221.     }
223.     //过滤不符合要求的文件类型
224.     let filterList: any = fileSizeList.filter((item: any) => !typeList.includes(item.type));
225.     if (filterList.length) {
226.         //错误的文件，不管里面有没有正确格式的，一律清除
227.         fileData.fileSizeList = [];
228.         fileData.allSize = 0;
229.         proxy.$message.error(message);
230.         return false;
231.     };
232.     return true;
233. };
235. //文件数量超出限制
236. const fileLimit = (fileSizeList: any) => {
237.     if (fileSizeList.length > props.data.limit) {
238.         proxy.$message.error(`文件数量不能超过 ${props.data.limit} 个，请重新上传！`);
239.         fileData.fileSizeList = [];
240.         return false;
241.     }
242.     return true;
243. };
245. //文件超出限制
246. const fileSizeLimit = (fileSizeList: any) => {
247.     let allSize = fileSizeList.reduce((accumulator, currentValue) => {
248.         if (currentValue) {
249.             return accumulator + currentValue.size;
250.         }
251.         return accumulator;
252.     }, 0);
254.     let fileSize = props.data.fileSize * 1024 * 1024;
255.     fileData.allSize = (allSize / 1024 / 1024).toFixed(2); //存储文件总大小 MB
257.     if (allSize > fileSize) {
258.         proxy.$message.error(`文件总大小不能超过 ${props.data.fileSize} MB，请重新上传！`);
259.         emit('dragUploadErrorTable', fileData);
260.         return false;
261.     }
262.     return true;
263. };
265. // 操作数据：文件超出后，展示的列表
266. const getGoBeyondTable = (fileSizeList: any) => {
267.     // 遍历，相同第一列为一项，size累加
268.     let result: any = fileSizeList.reduce((accumulator, current) => {
269.         if (accumulator[current[fileData.firstFileName]]) { //如果已经存在，则累加size
270.             accumulator[current[fileData.firstFileName]].size += current.size;
271.         } else {
272.             accumulator[current[fileData.firstFileName]] = { ...current };
273.         }
274.         return accumulator;
275.     }, {});
276.    
277.     // 将结果对象转换回数组
278.     result = Object.values(result);
279.     // 处理size为MB单位
280.     result.forEach((item: any) => {
281.         item.size = (item.size / 1024 / 1024).toFixed(2);
282.     });
283.     return result;
284. };
286. //移除超出文件列表的项
287. const handleDelete = (rowIndex: number, row: any) => {
288.     fileData.goBeyondTable.splice(rowIndex, 1);
290.     fileData.allSize = (fileData.allSize - row.size).toFixed(2); //更新总大小MB
292.     fileData.fileSizeList = fileData.fileSizeList.filter((item: any) => item[fileData.firstFileName] !== row[fileData.firstFileName]);
294.     fileData.waitUploadList = fileData.waitUploadList.filter((item: any) => item[fileData.firstFileName] !== row[fileData.firstFileName]);
295. };
297. /*请求上传到服务器*/
298. const handleUploadToServer = (click?: boolean) => {
299.     let autoUpload: boolean = props.autoUpload;
300.     if (click && fileData.step === 1) autoUpload = true; //手动上传
301.     if (!autoUpload && fileData.step === 1) return; //不自动上传，则不执行
303.     fileData.uploadList = fileData.waitUploadList;
304.     // 再次提交时验证文件大小是否超出限制
305.     if (click && fileData.step === 2 && fileData.allSize > props.data.fileSize) {
306.         proxy.$message.error(`文件总大小不能超过 ${props.data.fileSize} MB`);
307.         return;
308.     }
309.    
310.     let formData = new FormData();
311.     fileData.uploadList.forEach((item: any) => {
312.         formData.append(`${item.filePathName}`, item);
313.     });
314.    
315.     // // 遍历FormData对象并打印其内容：查看FormData对象数据是否正确
316.     // for (let [key, value] of formData.entries()) {
317.     //     console.log(`${key}: ${value}`);
318.     // }
320.     emit('dragUploadAxiosFn', formData); //上传参数抛出，外部做操作，不在组件做耦合
321. };
323. //此方法：如果是文件夹，则会递归调用自己，所以最后都会走 else 的逻辑
324. const readFiles = async (item: any) => {
325.     if (item.isDirectory) {
326.         // 是一个文件夹
327.         const directoryReader = item.createReader();
328.         // readEntries是一个异步方法
329.         const entries: any[] = await new Promise((resolve, reject) => {
330.             directoryReader.readEntries(resolve, reject);
331.         });
332.         let files = [];
333.         for (const entry of entries) {
334.             const resultFiles: any = await readFiles(entry);
335.             files = files.concat(resultFiles);
336.         }
337.         return files;
338.     } else {
339.         // file也是一个异步方法
340.         const file = await new Promise((resolve, reject) => {
341.             item.file(resolve, reject);
342.         });
343.         let obj: any = getPath(item.fullPath); //通过路径获取名称方法
344.         changeFileSizeList(file, obj);
346.         return [file];
347.     }
348. };
350. //更改 fileData.fileSizeList 的值：公共
351. const changeFileSizeList = (file: any, obj: any) => {
352.     try {
353.         file.filePathName = obj.filePathName; //添加路径名称
354.         file[fileData.firstFileName] = obj.pathObj[fileData.firstFileName]; //添加第一列文件名
355.         file.pathObj = obj.pathObj;
357.         let index = file.name.lastIndexOf('.');
358.         fileData.fileSizeList.push({ //添加图片路径、大小、名称
359.             filePathName: obj.filePathName,
360.             size: file.size,
361.             type: file.name.substring(index + 1),
362.             ...obj.pathObj
363.         });
364.     } catch {
365.         proxy.$message.error(`文件读取路径失败，请重新上传文件！`);
366.     }
367. };
369. //通过路径获取名称方法：公共
370. const getPath = (path: string) => {
371.     try {
372.         let filePathName: any = path;  // 传给后端的全路径
373.         if (path.startsWith('/')) { // 如果路径以斜杠开头，则删除第一个斜杠
374.             filePathName = path.slice(1);
375.         }
377.         let parts = filePathName.split('/'); // 路径分割成数组
378.         let pathObj = {}; // 存储每个部分
379.         for (let i = 0; i < parts.length; i++) {
380.             if (parts[i] !== '') { // 跳过空字符串（如果路径以 / 开头或结尾）
381.                 pathObj['pathName' + (i)] = parts[i];
382.             }
383.         }
385.         return {
386.             filePathName: filePathName,
387.             pathObj: pathObj
388.         }
389.     } catch {
390.         proxy.$message.error(`文件读取路径失败，请重新上传文件！`);
391.     }
392. };
395. //关闭事件
396. const closeDialogFn = () => {
397.     if (fileData.step === 1) {
398.         props.data.visible = false; //关闭弹窗
399.         return;
400.     }
401.     proxy.$messageBox({
402.         title: '关闭',
403.         message: '关闭后不会保留您所做的更改，确定关闭吗？',
404.         callback: (value: string) => {
405.             //confirm=确认；cancel=取消
406.             if (value === 'confirm') {
407.                 fileData.step = 1;
408.                 props.data.visible = false; //关闭弹窗
409.             }
410.         }
411.     });
412. };
413. </script>

复制代码

三、css 代码：

1. <style lang="scss" scoped>
2. .drag-box {
3.     position: relative;
4.     .progress-bar {
5.         position: absolute;
6.         z-index: 100;
7.         width: 100%;
8.         top: 0;
9.         left: 0px;
10.         right: 0px;
11.         bottom: -5px;
12.         display: flex;
13.         justify-content: center;
14.         align-items: center;
15.         background-color: rgba(255, 255, 255, 0.8);
16.         :deep(.el-progress.el-progress--line) {
17.             width: 100%;
18.             margin-left: 10px;
19.         }
20.     }
22.     .uploaded-list-wrap {
23.         max-height: 200px;
24.         overflow-y: auto;
25.         .uploaded-item {
26.             display: flex;
27.             justify-content: space-between;
28.             align-items: center;
29.             cursor: pointer;
30.             margin-bottom: 3px;
31.             .text-content {
32.                 width: 80%;
33.                 white-space: nowrap;
34.                 overflow: hidden;
35.                 text-overflow: ellipsis;
36.             }
37.             .icon {
38.                 width: 25px;
39.                 height: 25px;
40.             }
41.             .success-icon {
42.                 display: block;
43.             }
44.             .delete-icon {
45.                 display: none;
46.             }
47.             &:hover {
48.                 .success-icon {
49.                     display: none;
50.                 }
51.                 .delete-icon {
52.                     display: block;
53.                 }
54.             }
55.         }
56.     }
57. }
59. .div-text {
60.     width: 100%;
61.     height: 250px;
62.     border: 1px dashed #409effc2;;
63.     border-radius: 10px;
64.     box-sizing: border-box;
65.     display: flex;
66.     flex-direction: column;
67.     justify-content: center;
68.     align-items: center;
69.     font-size: 18px;
70.     background-color: #cccccc1c;
71.     .click-txt {
72.         color: #409effc2;;
73.         cursor: pointer;
74.     }
75.     .btn-wrap {
76.         margin-top: 20px;
77.     }
78. }
80. .min-h311 {
81.     min-height: 311px;
82. }
84. .max-h311 {
85.     max-height: 311px;
86. }
88. :deep(.el-dialog .el-dialog__header) {
89.     padding: 12px 30px;
90.     display: flex;
91.     justify-content: space-between;
92. }
94. :deep(.el-dialog .el-dialog__body) {
95.     padding: 8px 30px 11px;
96. }
98. :deep(.el-dialog .el-dialog__footer) {
99.     padding: 6px 30px 14px;
100. }
102. .dialog-footer {
103.     display: flex;
104.     justify-content: flex-end;
105. }
107. .color-409 {
108.     color: #409effc2;;
109. }
111. </style>

复制代码

四、vue 页面中使用：

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

复制代码

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

复制代码

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

 六、效果图，如下：

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。