修改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到一个表单中，最后发送请求。
首先看看第一步，我们需要知道对用的文件，那么，首先来找找文件被缓存到哪里了呢？或者说文件怎么才能一个一个存到表单中去呢
先看第一个简单例子
<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
•
</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
•
</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的时候发送请求），哈哈哈，真的是顺着思路就做下去了。
