Vue3+ElementPlue文件批量上传(自定义上传列表)

目录

上传功能的拆解

上传组件

选择图片

文件列表组件

文件列表操作

上传逻辑

完整代码

开发过程中遇到的问题及解决方案

需求：批量图片上传，可在列表中多选或全选，上传时可浏览进度，完成后清空列表。后端接口限制15张图片请求一次，前端限制一次最多选择三百张图片

技术栈：vue3 element-plus

上传功能的拆解

上传组件

基于element-plus的el-upload组件

1.  
   <!-- 按钮上传组件 -->
2.  
   <el-upload
3.  
   class="upload-s"
4.  
   :action="flgs.uploadUrl"
5.  
   :show-file-list="false"
6.  
   multiple
7.  
   :auto-upload="false"
8.  
   ref="uploadRef"
9.  
   :on-change="waitFileChange"
10.  
    accept=".jpg, .png, .JPG, .PNG, .jpeg, .JPEG"
11.  
    >
12.  
    <el-button :icon="Plus"></el-button>
13.  
    </el-upload>
14.  
    <!-- 拖拽上传组件 -->
15.  
    <el-upload
16.  
    class="upload-s"
17.  
    :drag="flgs.isDrag"
18.  
    v-show="flgs.isDrag"
19.  
    :action="flgs.uploadUrl"
20.  
    :show-file-list="false"
21.  
    multiple
22.  
    :auto-upload="false"
23.  
    ref="uploadRef"
24.  
    :on-change="waitFileChange"
25.  
    accept=".jpg, .png, .JPG, .PNG, .jpeg, .JPEG"
26.  
    >
27.  
    <el-icon class="el-icon--upload" v-show="flgs.isDrag"><upload-filled /></el-icon>
28.  
    <div class="el-upload__text" v-show="flgs.sDrag">
29.  
    Drop file here or
30.  
    <em>click to upload</em>
31.  
    </div>
32.  
    <template #tip>
33.  
    <div class="el-upload__tip"></div>
34.  
    </template>
35.  
    </el-upload>

选择图片

使用组件中的on-change属性获选择的所有图片

注：使用on-cahnge获取多选图片时，每次图片变化都会被调用，如果只想获取一次则使用一个定时器获取到最后一次选择的图片

1.  
   // 文件变化Handle
2.  
   const waitFileChange = (file: any, fileList: any[]) => {
3.  
   let cLength = fileList.length;
4.  
   flgs.value.maxLength = Math.max(cLength, flgs.value.maxLength);
5.  
   // 防止多次执行change
6.  
   setTimeout(() => {
7.  
   //防止函数多次调用后赋值错误
8.  
   if (cLength !== flgs.value.maxLength) return;
9.  
   flgs.value.maxLength = null;
10.  
    //限制单次选择最大数为300
11.  
    if (fileList.length > 300) {
12.  
    alertMsg('error', '单次上传文件最大数量为300');
13.  
    waitFileList.value = fileList.splice(0, 300);
14.  
    } else {
15.  
    waitFileList.value = fileList;
16.  
    }
17.  
    //计算文件大小
18.  
    fileList = fileList.map(x => ({
19.  
    ...x,
20.  
    newSize: `${(x.size / Math.pow(1024, 2)).toFixed(2)}M`
21.  
    }));
22.  
     
23.  
    }, 0);
24.  
    };

文件列表组件

文件列表绑定的数据为on-change所选择的数据

1.  
   <!-- 文件列表 -->
2.  
   <el-table
3.  
   class="u-table"
4.  
   @selection-change="handleSelectionChange"
5.  
   stripe
6.  
   :data="waitFileList"
7.  
   v-show="flgs.isDone"
8.  
   width="100%"
9.  
   >
10.  
    <el-table-column type="selection" align="center" width="50" />
11.  
    <el-table-column
12.  
    prop="name"
13.  
    label="文件名"
14.  
    align="center"
15.  
    show-overflow-tooltip
16.  
    width="100"
17.  
    />
18.  
     
19.  
    <el-table-column
20.  
    prop="newSize"
21.  
    label="文件大小"
22.  
    align="center"
23.  
    width="100"
24.  
    show-overflow-tooltip
25.  
    />
26.  
    <el-table-column label="" align="center" width="60">
27.  
    <template #default="scope">
28.  
    <el-icon @click="deleteRow(scope.row.uid, uploadRef)" class="adpIcon cursor-p">
29.  
    <svg-icon name="delete"></svg-icon>
30.  
    </el-icon>
31.  
    </template>
32.  
    </el-table-column>
33.  
    </el-table>

文件列表操作

注：在删除文件列表数据的同时，需要删除el-upload自带的文件列表区域(删除el-upload的数据列表后数据存在，但是无法看到)

1.  
   // 删除列表
2.  
   function deleteRow(uid: number, uploadRef: any) {
3.  
   waitFileList.value = waitFileList.value.filter(x => x.uid != uid);
4.  
   //删除el-upload自带的数据
5.  
   uploadRef.handleRemove(waitFileList.value);
6.  
   }
7.  
   // 表格选中的数据
8.  
   function handleSelectionChange(fileList: any[]) {
9.  
   selectedFile.value = fileList;
10.  
    // 预防分割导致数据变化
11.  
    flgs.value.selectedFile = deepCopy(fileList)
12.  
    }

上传逻辑

1.  
   function uploadBegin(uploadRef: any) {
2.  
   // 前置条件
3.  
   if (!flgs.value.projectId) return alertMsg('warning', '请选择批次');
4.  
   if (selectedFile.value.length == 0) return alertMsg('warning', '请选择要上传的文件');
5.  
   // loading
6.  
   flgs.value.processFlgs = true;
7.  
   // 十五张图片一次请求，使用步长为1表示测试状态下一张图片请求一次
8.  
   for (let i: number = 0; i < flgs.value.selectedFile.length; i = 1) {
9.  
   // 每次添加后删除原有数据
10.  
    let uploadFile: any[] = selectedFile.value.splice(0,selectedFile.value.length<1 ? selectedFile.value.length : 1);
11.  
    //调用上传API
12.  
    uploadAPI(uploadFile,uploadRef)
13.  
    }
14.  
    }
15.  
    function uploadAPI(list: any[], uploadRef: any) {
16.  
    const formData = new FormData();
17.  
    formData.append('projectId', flgs.value.projectId);
18.  
    //把文件流使用formData格式发送
19.  
    list.forEach(x => {
20.  
    formData.append('files', x.raw);
21.  
    });
22.  
    postFormData(DataM.upload, formData).then(res => {
23.  
    flgs.value.count
24.  
    // 进度条数据
25.  
    flgs.value.processNum = ((flgs.value.count) / flgs.value.selectedFile.length) * 100;
26.  
    // 上传完成时初始化数据
27.  
    if (flgs.value.processNum == 100) {
28.  
    flgs.value.processFlgs = false;
29.  
    flgs.value.count = 0
30.  
    //过滤上传列表中已上传的数据
31.  
    waitFileList.value = deWeight(waitFileList.value,flgs.value.selectedFile)
32.  
    //清除el-upload组件中的已上数据(重点)
33.  
    uploadRef.handleRemove(flgs.value.selectedFile);
34.  
    alertMsg('success', '上传成功' || res.message);
35.  
    }
36.  
    });
37.  
    }

完整代码

1.  
   <template>
2.  
   <div class="right-container radius-md">
3.  
   <div class="u-header el-row is-justify-space-between t-config filter flex radius-md q-pa-md">
4.  
   <div class="header-font">上传列表</div>
5.  
   <div class="right-fun el-row is-justify-space-between flex">
6.  
   <el-upload
7.  
   class="upload-s"
8.  
   :action="flgs.uploadUrl"
9.  
   :show-file-list="false"
10.  
    multiple
11.  
    :auto-upload="false"
12.  
    ref="uploadRef"
13.  
    :on-change="waitFileChange"
14.  
    accept=".jpg, .png, .JPG, .PNG, .jpeg, .JPEG"
15.  
    >
16.  
    <el-button :icon="Plus"></el-button>
17.  
    </el-upload>
18.  
    </div>
19.  
    </div>
20.  
    <!-- 文件列表 -->
21.  
    <el-table
22.  
    class="u-table"
23.  
    @selection-change="handleSelectionChange"
24.  
    stripe
25.  
    :data="waitFileList"
26.  
    v-show="flgs.isDone"
27.  
    width="100%"
28.  
    >
29.  
    <el-table-column type="selection" align="center" width="50" />
30.  
    <el-table-column
31.  
    prop="name"
32.  
    label="文件名"
33.  
    align="center"
34.  
    show-overflow-tooltip
35.  
    width="100"
36.  
    />
37.  
     
38.  
    <el-table-column
39.  
    prop="newSize"
40.  
    label="文件大小"
41.  
    align="center"
42.  
    width="100"
43.  
    show-overflow-tooltip
44.  
    />
45.  
    <el-table-column label="" align="center" width="60">
46.  
    <template #default="scope">
47.  
    <el-icon @click="deleteRow(scope.row.uid, uploadRef)" class="adpIcon cursor-p">
48.  
    <svg-icon name="delete"></svg-icon>
49.  
    </el-icon>
50.  
    </template>
51.  
    </el-table-column>
52.  
    </el-table>
53.  
    <!-- loading -->
54.  
    <div
55.  
    class="el-loading-mask"
56.  
    style="background-color: rgb(122, 122, 122, 0.8); z-index: 1026"
57.  
    v-if="flgs.processFlgs"
58.  
    >
59.  
    <div class="el-loading-spinner">
60.  
    <el-progress
61.  
    color=" #B0C4DE"
62.  
    type="circle"
63.  
    :show-text="false"
64.  
    :stroke-width="5"
65.  
    :percentage="flgs.processNum"
66.  
    status="exception"
67.  
    ></el-progress>
68.  
    <p class="el-loading-text" style="color: #b0c4de">正在上传...</p>
69.  
    </div>
70.  
    </div>
71.  
    <!-- 拖拽上传区域 -->
72.  
    <el-upload
73.  
    class="upload-s"
74.  
    :drag="flgs.isDrag"
75.  
    v-show="flgs.isDrag"
76.  
    :action="flgs.uploadUrl"
77.  
    :show-file-list="false"
78.  
    multiple
79.  
    :auto-upload="false"
80.  
    ref="uploadRef"
81.  
    :on-change="waitFileChange"
82.  
    accept=".jpg, .png, .JPG, .PNG, .jpeg, .JPEG"
83.  
    >
84.  
    <el-icon class="el-icon--upload" v-show="flgs.isDrag"><upload-filled /></el-icon>
85.  
    <div class="el-upload__text" v-show="flgs.sDrag">
86.  
    Drop file here or
87.  
    <em>click to upload</em>
88.  
    </div>
89.  
    <template #tip>
90.  
    <div class="el-upload__tip"></div>
91.  
    </template>
92.  
    </el-upload>
93.  
    <div class="r-bottom">
94.  
    <el-select clearable v-model="flgs.projectId" placeholder="请选择批次" class="pa-md">
95.  
    <el-option
96.  
    v-for="item in projectList"
97.  
    :key="item.id"
98.  
    :label="item.companyName"
99.  
    :value="item.id"
100.  
     />
101.  
     </el-select>
102.  
     <div class="right-fun pa-md">
103.  
     <el-button @click="uploadBegin(uploadRef)">开始上传</el-button>
104.  
     </div>
105.  
     </div>
106.  
     </div>
107.  
     </template>
108.  
      
109.  
     <script lang="ts" setup>
110.  
     import { ref, onMounted, watch, defineAsyncComponent } from 'vue';
111.  
     import { postData, postFormData } from '@/api/http';
112.  
     import { DataM } from '@/api/api-list';
113.  
     import { alertMsg, deWeight, deepCopy } from '@/util';
114.  
     import { Plus, UploadFilled } from '@element-plus/icons-vue';
115.  
      
116.  
     const props = defineProps({
117.  
     projectList:Array,
118.  
     default:[]
119.  
     })
120.  
     const uploadRef = ref();
121.  
     const waitFileList = ref([] as any[]);
122.  
     const selectedFile = ref([] as any[]);
123.  
     const flgs = ref({
124.  
     isDone: false,
125.  
     isDrag: true,
126.  
     uploadUrl: '',
127.  
     projectId: null,
128.  
     maxLength: null,
129.  
     selectedFile:[],
130.  
     processNum: 0,
131.  
     processFlgs: false,
132.  
     count:0
133.  
     });
134.  
      
135.  
     watch(
136.  
     () => waitFileList.value,
137.  
     () => {
138.  
     flgs.value.isDone = waitFileList.value.length > 0 ? true : false;
139.  
     flgs.value.isDrag = !flgs.value.isDone;
140.  
     }
141.  
     );
142.  
      
143.  
     // 文件变化Handle
144.  
     const waitFileChange = async (file: any, fileList: any[]) => {
145.  
     let cLength = fileList.length;
146.  
     flgs.value.maxLength = Math.max(cLength, flgs.value.maxLength);
147.  
     // 防止多次执行change
148.  
     setTimeout(() => {
149.  
     if (cLength !== flgs.value.maxLength) return;
150.  
     flgs.value.maxLength = null;
151.  
     if (fileList.length > 300) {
152.  
     alertMsg('error', '单次上传文件最大数量为300');
153.  
     waitFileList.value = fileList.splice(0, 300);
154.  
     } else {
155.  
     waitFileList.value = fileList;
156.  
     }
157.  
     fileList = fileList.map(x => ({
158.  
     ...x,
159.  
     newSize: `${(x.size / Math.pow(1024, 2)).toFixed(2)}M`
160.  
     }));
161.  
      
162.  
     }, 0);
163.  
     };
164.  
     // 删除列表
165.  
     function deleteRow(uid: number, uploadRef: any) {
166.  
     waitFileList.value = waitFileList.value.filter(x => x.uid != uid);
167.  
     uploadRef.handleRemove(waitFileList.value);
168.  
     }
169.  
     // 表格选中的数据
170.  
     function handleSelectionChange(fileList: any[]) {
171.  
     selectedFile.value = fileList;
172.  
     // 预防分割导致数据变化
173.  
     flgs.value.selectedFile = deepCopy(fileList)
174.  
     }
175.  
     // 开始上传
176.  
     async function uploadBegin(uploadRef: any) {
177.  
     // 前置条件
178.  
     if (!flgs.value.projectId) return alertMsg('warning', '请选择批次');
179.  
     if (selectedFile.value.length == 0) return alertMsg('warning', '请选择要上传的文件');
180.  
     // loading
181.  
     flgs.value.processFlgs = true;
182.  
     // 十五张图片一次请求
183.  
     for (let i: number = 0; i < flgs.value.selectedFile.length; i = 1) {
184.  
     // 每次添加后删除原有数据
185.  
     let uploadFile: any[] = selectedFile.value.splice(0,selectedFile.value.length<1 ? selectedFile.value.length : 1);
186.  
     uploadAPI(uploadFile,uploadRef)
187.  
     }
188.  
     }
189.  
     function uploadAPI(list: any[], uploadRef: any) {
190.  
     const formData = new FormData();
191.  
     formData.append('projectId', flgs.value.projectId);
192.  
     list.forEach(x => {
193.  
     formData.append('files', x.raw);
194.  
     });
195.  
     postFormData(DataM.upload, formData).then(res => {
196.  
     flgs.value.count
197.  
     // 进度条数据
198.  
     flgs.value.processNum = ((flgs.value.count) / flgs.value.selectedFile.length) * 100;
199.  
     // 上传完成时初始化数据
200.  
     if (flgs.value.processNum == 100) {
201.  
     flgs.value.processFlgs = false;
202.  
     flgs.value.count = 0
203.  
     waitFileList.value = deWeight(waitFileList.value,flgs.value.selectedFile)
204.  
     uploadRef.handleRemove(flgs.value.selectedFile);
205.  
     alertMsg('success', '上传成功' || res.message);
206.  
     }
207.  
     });
208.  
     }
209.  
     </script>
210.  
      
211.  
     <style lang="less" scoped>
212.  
     .right-container {
213.  
     margin: 5px;
214.  
     .u-header {
215.  
     width: 100%;
216.  
     padding: 10px;
217.  
     .header-font {
218.  
     line-height: 32px;
219.  
     }
220.  
     .right-fun {
221.  
     width: 15%;
222.  
     .check-menu {
223.  
     color: rgb(174, 174, 174);
224.  
     font-size: 14px;
225.  
     }
226.  
     }
227.  
     .el-button {
228.  
     border-radius: 5px;
229.  
     }
230.  
     }
231.  
     .u-table {
232.  
     height: calc(100vh - 180px);
233.  
     overflow-y: auto;
234.  
     .el-table__header-wrapper {
235.  
     .cell {
236.  
     text-align: right;
237.  
     }
238.  
     }
239.  
     }
240.  
     .upload-s {
241.  
     width: 100%;
242.  
     }
243.  
     .r-bottom {
244.  
     width: 100%;
245.  
     position: relative;
246.  
     display: flex;
247.  
     justify-content: space-between;
248.  
     .pa-md{
249.  
     padding: 10px;
250.  
     }
251.  
     }
252.  
      
253.  
     }
254.  
     </style>

开发过程中遇到的问题及解决方案

1.使用on-change属性时多次调用绑定的方法

将选中数据的赋值放到定时器(任务队列)中，让每次都拿到最后一次change的数据

2.自定义上传列表数据删除时，上传组件原有的数据未删除

如果不需要上传组件自带的上传列表，删除即可，但是原有的数据会一直存在上传组件的插槽中，需要在删除自定义上传列表的同时删除原有插槽中的数据，否则会一直存在

3.数组切割导致素组被破坏，循环无法正常运行

关于基本数据类型和引用数据类型的知识点，因为数据属于引用数据类型，在赋值的时候只是赋值的地址而不是数据本身，所以原有的数据发生改变时，当前的数据也会变化。此问题解决方案为使用深拷贝拷贝一份数据即可

4.循环调用使用接时，每次的请求参数都会变为循环最后一次所得的参数(与第一个问题可以互相引用)

因为请求是异步的，导循环已经执行完毕之后才开始请求，导致请求参数错误。涉及到JS的执行机制，JS会执行栈中的任务(同步)，栈中的任务完后才执行任务队列中的任务(异步)

这篇好文章是转载于：学新通技术网