批改element的upload组件，反对多文件一次上传
Element中的Upload组件应该是咱们经常会用到的一个组件，通常应用它做一些文件上传操作，不过对应的demo中尽管能够反对多个文件的抉择上传，但却是每个文件上传调用一个接口，这样操作起来就不是那么不便了。
明天就带大家批改一下组件，把要上传的文件放到同一个申请中发送给服务器。
首先看一下对应的文档
https://element-plus.gitee.io...
在属性列表中，咱们看到有这样一些属性能够供咱们应用
| 属性 | 形容 |
|---|---|
| multiple | 是否反对多选文件 |
| on-change | 文件状态扭转时的钩子，增加文件、上传胜利和上传失败时都会被调用 |
| before-upload | 上传文件之前的钩子，参数为上传的文件。 若返回 false 或者返回 Promise 且被 reject，则终止上传。 |
| http-request | 笼罩默认的 xhr 行为，容许您实现本人的上传文件申请 |
而后就是说一下思路，
要实现多个文件放到一个表单里发送给后盾，咱们须要一次性获取所有文件，而后把文件append到一个表单中，最初发送申请。
首先看看第一步，咱们须要晓得对用的文件，那么，首先来找找文件被缓存到哪里了呢？或者说文件怎么能力一个一个存到表单中去呢
先看第一个简略例子
<template> <div> <el-upload class="upload-demo" action="#" :http-request="() => {}" :on-change="handleChange" :before-upload="handleUpload" multiple \> <el-button type="primary">Click to upload</el-button> <template #tip> <div class="el-upload__tip"> jpg/png files with a size less than 500kb </div> </template> </el-upload> </div></template><script>export default { name: "Home", methods: { handleUpload(file) { console.log(file); }, handleChange(file, fileList) { console.log(fileList.length,fileList); }, },};</script>运行一下，能够发现，它会打印屡次，而且每次都是先console打印1进去。
对应的fileList则是所有选中的文件。咱们须要一个标识，让handleChange函数只执行一次就好了，就持续批改成上面的代码
<template> <div> <el-upload class="upload-demo" action="#" :http-request="() => {}" :on-change="handleChange" multiple \> <el-button type="primary">Click to upload</el-button> <template #tip> <div class="el-upload__tip"> jpg/png files with a size less than 500kb </div> </template> </el-upload> </div></template><script>export default { name: "Home", data() { return { collect: false, }; }, methods: { handleUpload(file) { console.log(2, file); }, handleChange(file, fileList) { if (!this.collect) { console.log(1, fileList); this.collect = true; } }, },};</script>曾经获取到了对应的文件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的时候发送申请），哈哈哈，真的是顺着思路就做上来了。