一、需求描述：在页面上点击按钮弹出选择电脑文件的界面，可以一次性选择多个文件一起上传到服务器上，并把上传成功的文件展示在页面上。
·
二、问题阐述：el-upload是支持多文件上传的，但是是同步进行的，你点击上传按钮，选择了多个文件后点击确定，会同时调用上传文件的接口，这样很容易导致服务器奔溃，导致接口报错。
·
三、解决方法：为了解决这一难题，本文采用递归的方法来实现精准上传文件。
·
四、实现思路：递归上传是指：你选择了n个文件点击确定后，第一个接口上传成功或者失败后，再调用第二个接口上传第二个文件，依次等待上传完所有文件，这样做法可以大大减轻服务器的压力，就是上传时间会比较长。上传效果请看下方动态示例图
主要逻辑详解：
1、首先需要先取消组件的自动上传操作，把属性auto-upload的值设置为false，就禁用了文件的自动上传功能了，把自动转化为手动，之所以选择多个文件会并行调用上传接口，就是这个属性导致的。
·
2、属性auto-upload设置为false之后，action的属性就失效了，只会触发change事件、上传失败on-error事件以及上传个数限制before-upload事件。
·
3、关键点就在于change事件，选择了多少个文件，这个事件就会执行多少次，例如你选择了100个文件，change事件就会循环执行100次，为了保证上传的准确性，这里顺手写了防抖事件，通过防抖，可以清楚的知道，上传进度到哪了，change事件什么时候结束，在这里就可以开始调用后端给我们的上传接口了。
·
4.因为我是想减少服务器压力，既在上一个文件上传结束后，再去上传下一个文件。故，我采用了递归一次传一个（递归逻辑在submitUpload2事件里）。同样的，如果你想只调用一次接口，将1000个文件传给后端，那么你就将submitUpload2递归事件给修改调，改成调一次接口，传所有file文件数组即可（具体看你们后端的数据结构）。
·
5.因为是上传多个文件，时间肯定长，如果你不想继续传递后续文件，就调用submitAbort即可。但是element文档说的abort()取消上传事件不生效。所以我是直接将上传列表给置空了，所以递归也就结束了就不传递了。
.
6.同样因为上传时间长，我就设置了进度条（当前已上传的个数/所有需要上传个数）。但是你如果切换到其他页面的话，再切换到当前上传vue页面，因为生命周期原因导致看不到上传进度。所以可以将这个上传vue页面使用keep-alive进行路由缓存，这样除了刷新浏览器外，切换到当前页还是会读缓存会看到上传进度。（如果你既想要缓存进度条，又想要刷新页面的list等某些数据，那么你缓存此页面，然后在activated单独调获取list数据方法即可）。
.
7.因为我的需要是，选择文件成功后，默认去上传，所以我是在防抖事件后就去调递归上传了。正常情况下，其实需要点击这个按钮然后去上传的，既手动点击上传（被注释掉了）<!– 手动点击上传 –>
以下代码仅供参考，可以直接复制使用（注意将axios的接口转化为后端提供的接口即可）！
将文件拖到此处，或点击上传(单个文件需小于100M,一次最多上传1000个pdf文件)（文件正在上传中，请等待...）<!-- 手动点击上传 -->取消后续文件上传上传过程请勿刷新浏览器和跳转其他页面...import axios from 'axios'export default {data () {return {fileNum: '',// 单词递归上传的文件upFileList: '',//需要依次上传的待传列表percentTotal: 0,//总上传个数percentNow: 0,//当前上传个数showDesc: '',//结束文案showPercent: false,//显示上传进度条time: null,// change事件是否结束 是否可以直接调手动上传事件（目前设置1.5s）disabledUpload: false,//正在上传中 禁止再次选择文件上传fileData: {},//上传参数fileList1: [],}},activated: {// 对于每次进入页面想要刷新的数据，放在这里调用即可 例如 this.getList()},methods: {// 超出限制个数提示handleExceed (files, fileList) {console.log('当前限制一次性最多上传1000个文件', files, fileList)this.$message.warning("当前限制一次性最多上传1000个文件")},changeFile (file, fileList) {this.disabledUpload = trueconsole.log('changeFile', file, fileList)const isLt2M = file.size / 1024 / 1024 -1)) {this.$message.warning("当前仅支持pdf格式的文件上传")// return false // 这个return无效 故去掉}// 符合条件的进入待传列表this.upFileList = []for (let x of fileList) {if (x.raw && (x.name.indexOf('.pdf') > -1) && (x.size / 1024 / 1024 {this.time = nullconsole.log('防抖 高频触发后n秒内只会执行一次再次触发重新计时')this.fnBegin()//说明此时change了所有文件了 可以上传了}, 1500)},fnBegin () {console.log('此时change了所有文件 开始上传', this.upFileList)this.submitUpload2()},// 正式上传掉后端接口submitUpload2 () {if (this.upFileList.length > 0) {this.showPercent = truethis.fileNum = new FormData()// new formData对象this.fileNum.append('file', this.upFileList[0])// append增加数据this.fileNum.append('name', this.upFileList[0].name)// append增加数据let _vm = thisaxios({url: '/chc-shop/api/v1/accident/szcp/electronicfile/upload',headers: {"Content-Type": "multipart/form-data",},method: "post",data: this.fileNum,}).then(res2 => {// 每次上传当前一个后 不论成功失败就删除当前这个--如果上传失败想继续传当前这个 就把这两行注释掉this.percentNow = this.percentNow + 1this.upFileList.shift()console.log('上传返回', res2)if (res2.data.success) {// this.$message({// message: "上传成功",// type: 'success'// })// 进行递归 上传下一个this.submitUpload2()} else {_vm.$message({message: res2.data.return_message || '上传失败',type: "error",})// 进行递归 上传下一个this.showDesc = '上传结束，部分文件上传失败'this.submitUpload2()}}).catch(error => {console.log(error)_vm.$message({message: error || '上传失败',type: "error",})// 每次上传当前一个后 不论成功失败就删除当前这个--如果上传失败想继续传当前这个 就把这两行注释掉this.percentNow = this.percentNow + 1this.upFileList.shift()// 进行递归 上传下一个this.showDesc = '上传结束，部分文件上传失败'this.submitUpload2()})} else {this.disabledUpload = falsethis.showPercent = falsethis.upFileList = [] //清空待传列表this.$refs.upload1.clearFiles()this.fileList1 = []if ((this.percentNow == this.percentTotal) && this.percentTotal) {this.$message.success(this.showDesc " />