应用场景:
拖拽多个文件到区域后,松手就开始上传。
想要解决的问题:
获取拖拽选取的所有文件列表,然后只发一次请求。
遇到的问题:
el-load的多文件上传机制依旧是一个文件一个文件的上传。
像on-chang、http-request这些可以获取文件的方法,都是单文件触发。
比如:你拖了三个文件进去,on-chang、http-request都会触发三次,
on-chang有两个参数file,fileList。
比如:on-chang触发的三次时,file参数都是1个,fileList的参数的个数分别时1 2 3 。
问题总结:无法知道该在什么阶段搜集到所有的文件,因为选取的文件数是未知的,你也不知道该在执行的第几次像后端发起请求。
解决办法:
this.fileListArr 是搜集的所有的文件,在请求成功后清除this.fileListArr;
计时器里面是发给后端的请求
思路:在每次调用on-chang或http-request 时,先清除定时器,然后再创建一个定时器,这样每次调用时,都会清除上一个计时器,只会留下最后一个计时器。然后再执行它。
注:如果是点击上传多个文件,是可以通过给el-load绑定ref = load 获取节点,从而可以在第一次in-chang时就获取到总文件数(this.$refs.load.uploadFiles /filelist),然后就可以通过判断fileList的长度等于总文件数的时候发起请求。但是拖拽时此方法不行。