当前位置:网站首页>功能:多文件上传,统一提交
功能:多文件上传,统一提交
2022-06-09 18:06:00 【[email protected]】
一、需求:
前端实现多文件上传,统一提交上传后服务器返回来的数据,最后一个文件上传完成后立即提交保存,不能间隔时间。
二、思路分析:
2.1、点击上传-->调用file方法-->调用upload方法,我们定义两个变量flagA和flagB,分别记录两个方法执行的次数,每次执行+=1,file先执行,upload后执行,所以upload方法结束后我们我们比较flagA和flagB的值,如果flagA大于flagB说明还有文件要上传,如果flagA等于flagB说明已经是最后一个文件了。这个时机就是我们调用保存的时机。
2.2、以上传三个文件为例:
| file | upload | 对比flag | 结果 | |
| 文件1 | flagA+=1 | flagB+=1 | flagA > flagB | 没有上传完成 |
| 文件2 | flagA+=1 | flagA+=1 | flagA > flagB | 没有上传完成 |
| 文件3 | flagA+=1 | flagA+=1 | flagA = flagB | 上传完成,执行方法 |
三、代码:
3.1、定义flag:
flagA: 0, // 记录file
flagB: 0, // 记录upload3.2、记录file:
toRequestFile(data) {
this.flagA += 1
this.toRequest(data, 'file');
},3.3、记录upload:
toRequest(data, type) {
const fd = new FormData();
fd.append('file', data.file);
commonUpload(fd).then(res=>{
this.$message({ type: 'success', message: '上传成功' });
}).finally(()=>{
this.flagB += 1 // 记录upload
console.log('914flagA-flagB', this.flagA, this.flagB)
})
},3.4、效果:
![]()
上传三个文件,三次次upload执行完成打印3,3,说明三个文件都执行完成。
四、欢迎交流指正,关注我,一起学习。
版权声明
本文为[[email protected]]所创,转载请带上原文链接,感谢
https://blog.csdn.net/snowball_li/article/details/125170870
边栏推荐
- What is the expected life of the conductive slip ring
- 得物复杂C端项目的重构实践
- NLP text representation word bag model and TF-IDF
- UnicodeDecodeError: ‘gbk‘ codec can‘t decode byte 0xad in position 2: illegal multibyte sequence
- AI chief architect 4-aica-baidu CV technology application and industry landing experience
- Side B of the charging pile is Not only official account? And smart charging applet!
- Moco -Momentum Contrast for Unsupervised Visual Representation Learning
- 深入理解联合索引的最左前缀原则
- Function anti shake for performance optimization in JS
- Epigentek Hi-Fi cDNA 合成试剂盒说明书
猜你喜欢

华为云零代码开发图片压缩工具

基于Nexys3的频谱仪设计VHDL可上板

Who says redis can't save big keys

MySQL并行复制(MTS)原理(完整版)

UnicodeDecodeError: ‘gbk‘ codec can‘t decode byte 0xad in position 2: illegal multibyte sequence

Influence of K value selection in KNN on Model

深度学习与CV教程(13) | 目标检测 (SSD,YOLO系列)

如何让我们的自建站点拥有自定义域名(1)

SPI通信原理+Verilog实现及仿真(完整代码)

MySQL parallel replication (MTS) principle (full version)
随机推荐
CNN - nn. Conv1d use
Side B of the charging pile is Not only official account? And smart charging applet!
空闲内存的管理
如何让我们的自建站点拥有自定义域名(1)
进程控制--->进程终止
【MySQL字符串数据类型优化】char和varchar的区别
Fastjson deserialization Remote Code Execution Vulnerability
NLP text representation word bag model and TF-IDF
如何以案例学习kd树构建和搜索过程?
提升Typecho首页ttfb加载速度以及若干升级
导电滑环的主要应用在那些方面
Solve the chrome prompt: "your connection is not a private connection" and there is no continue access option
[embedded Engineer · single chip microcomputer] ① basic concept of single chip microcomputer
AutoCAD - coordinate leader annotation
Development and practice of the martyr's family search system
Macro definition CV with parameters in opencv_ Role of assert()
About concurrency and parallelism, are the fathers of go and Erlang wrong?
GCN图卷积神经网络概述
自动化控制系统中滑环的应用
Ali's 10-year Technician: seven ways of thinking of the leader