当前位置: 首页 > Web前端 > HTML

修改element的上传组件,支持一次上传多个文件

时间:2023-03-28 16:19:03 HTML

修改element的上传组件,支持一次上传多个文件但是,虽然对应的demo可以支持多个文件的选择上传,但是每个文件上传调用一个接口,所以操作不是很方便。今天带大家修改组件,将需要上传的文件放在同一个请求中,发送到服务器。先看对应的文档https://element-plus.gitee.io...在属性列表中,我们可以看到有一些属性是我们可以使用的。该属性描述了multiple是否支持多选文件on-changefilestatuschange添加钩子,当上传成功或上传失败时,会调用before-upload。上传文件前的钩子,参数为上传的文件。如果它返回false或返回一个Promise并被拒绝,则上传终止。http-request覆盖了默认的xhr行为,让你实现自己的上传文件请求,然后只谈思路。实现一个表单多个文件发送到后台,我们需要一次获取所有文件,然后将文件追加到一个表单中,最后发送请求。首先看第一步,我们需要知道要用到的文件,那么,首先我们要弄清楚文件缓存在哪里?或者如何将文件一个一个保存到表格中?让我们看第一个简单的例子

运行一段时间,可以发现会打印多次,每次控制台先打印1。对应的fileList是所有选中的文件。我们需要一个标识,让handleChange函数只执行一次,继续修改下面的代码
对应的文件List已经拿到了,剩下的就是写一个方法将它们追加到表单中,然后发送就这样,我们再写一个函数来处理functionappendFile(files){constformData=newFormData()files.foreach((file)=>{formData.append('file',file)})returnfile}ifNeed要记录开始选择的文件数,只需使用以下代码,并替换函数handleChange(){constfiles=document.getElementsByClassName('upload-demo')if(files&&files.length>0){constupload=files[0].getElementsByTagName('input')if(upload&&upload.length>0&&upload[0].files&&upload[0].files.length>0){fileNum.value=upload[0].files.length}}}上面函数中的fileNum是一开始选择的文件总数。当然也可以先求出文件总数,然后在before-upload中把文件追加到表单中,这样比较麻烦。.不过说实话,其实一开始我是这么写的(通过计数,append后进行-1操作,到0时发送请求),哈哈哈,果然是顺了思路。