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

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

Element中的Upload组件应该是我们常常会用到的一个组件，通常使用它做一些文件上传操作，不过对应的demo中虽然可以支持多个文件的选择上传，但却是每个文件上传调用一个接口，这样操作起来就不是那么方便了。

今天就带大家修改一下组件，把要上传的文件放到同一个请求中发送给服务器。

首先看一下对应的文档

https://element-plus.gitee.io/zh-CN/component/upload.html#manual-upload

在属性列表中，我们看到有这样一些属性可以供我们使用

属性描述

multiple是否支持多选文件

on-change文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用

before-upload上传文件之前的钩子，参数为上传的文件。 若返回 false 或者返回 Promise 且被 reject，则终止上传。

http-request覆盖默认的 xhr 行为，允许您实现自己的上传文件请求

然后就是说一下思路，

要实现多个文件放到一个表单里发送给后台，我们需要一次性获取所有文件，然后把文件append到一个表单中，最后发送请求。

首先看看第一步，我们需要知道对用的文件，那么，首先来找找文件被缓存到哪里了呢？或者说文件怎么才能一个一个存到表单中去呢

先看第一个简单例子

运行一下，可以发现，它会打印多次，而且每次都是先console打印1出来。

对应的fileList则是所有选中的文件。我们需要一个标识，让handleChange函数只执行一次就好了，就继续修改成下面的代码

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

function appendFile(files){

  const formData = new FormData()

  files.foreach((file)=>{

    formData.append('file',file)

  })

  return file

}

如果是需要记录下一开始选择的文件个数的话，用下面代码就行了，具体细节自行替换下

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 = upload[0].files.length        }      }    }

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