el-upload多个文件上传但是只发送一个请求向服务端上传文件

element-ui的上传组件el-upload在多选电脑里的文件进行上传,但是会多次触发上传,每有一个文件需要上传就触发一次上传方法,如果只是将上传axios请求写到上传方法里,就直接会造成浏览器发送多次请求,有点浪费资源。

我的思路是加setimeout延时请求 每次触发上传方法先将文件存到一个空数组,然后window.setTimeout定义一个延时器给时间100ms(时间看你开心,个人觉得时间只要在0.5s内会舒适一点)延时器内写axios请求。

请求内参数需要注意:文件上传的参数定义多数我们都会用formData()装载,可能用于存储文件的那个字段或许在后端是具备批量上传的效果,实际上你在这个字段里习惯性穿数组后,后端发现该字段里空空如也,也没有文件,解决方法是将文件存储的数组遍历,多次formData.append(‘file字段’, 每一个文件data)
请求参数会如下:
el-upload多个文件上传但是只发送一个请求向服务端上传文件_第1张图片
最后,写一个清除延时器放在刚刚的window.setTimeout前面!!一定要前面!

你可能感兴趣的:(vue.js,前端,javascript)