el-load 多文件拖拽或点击上传 (拖拽放手即上传)

339 阅读1分钟

应用场景:

拖拽多个文件到区域后,松手就开始上传。

想要解决的问题:

获取拖拽选取的所有文件列表,然后只发一次请求。

遇到的问题:

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的长度等于总文件数的时候发起请求。但是拖拽时此方法不行。