修改element的upload组件，支持多文件一次上传前端

修改element的upload组件，支持多文件一次上传
Element中的Upload组件应该是我们常常会用到的一个组件，通常使用它做一些文件上传操作，不过对应的demo中虽然可以支持多个文件的选择上传，但却是每个文件上传调用一个接口，这样操作起来就不是那么方便了。
今天就带大家修改一下组件，把要上传的文件放到同一个请求中发送给服务器。
首先看一下对应的文档
https://element-plus.gitee.io...
在属性列表中，我们看到有这样一些属性可以供我们使用

属性	描述
multiple	是否支持多选文件
on-change	文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
before-upload	上传文件之前的钩子，参数为上传的文件。若返回 `false` 或者返回 `Promise` 且被 reject，则终止上传。
http-request	覆盖默认的 xhr 行为，允许您实现自己的上传文件请求

然后就是说一下思路，
要实现多个文件放到一个表单里发送给后台，我们需要一次性获取所有文件，然后把文件append到一个表单中，最后发送请求。
首先看看第一步，我们需要知道对用的文件，那么，首先来找找文件被缓存到哪里了呢？或者说文件怎么才能一个一个存到表单中去呢
先看第一个简单例子

运行一下，可以发现，它会打印多次，而且每次都是先console打印1出来。
对应的fileList则是所有选中的文件。我们需要一个标识，让handleChange函数只执行一次就好了，就继续修改成下面的代码

已经获取到了对应的文件List，剩下的就是写一个方法，把他们append到表单中去，然后发送就好啦，下面再写一个函数处理一下

function appendFile(files){ const formData = https://www.it610.com/article/new FormData() files.foreach((file)=>{ formData.append('file',file) }) return file }

【修改element的upload组件，支持多文件一次上传】如果是需要记录下一开始选择的文件个数的话，用下面代码就行了，具体细节自行替换下
function handleChange() {

const files = document.getElementsByClassName('upload-demo') if (files && files.length > 0) { const upload = files[0].getElementsByTagName('input') if ( upload && upload.length > 0 && upload[0].files && upload[0].files.length > 0 ) { fileNum.value = https://www.it610.com/article/upload[0].files.length } } }

上面函数中的fileNum就是最开始选择的文件总数。当然你也可以先找到文件总数，然后在before-upload中将文件append到表单中，就是比较麻烦一些。。不过讲真，其实我最开始就是这么写的（通过计数的方式，append之后进行-1操作，等到0的时候发送请求），哈哈哈，真的是顺着思路就做下去了。