修改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
    </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的时候发送请求），哈哈哈，真的是顺着思路就做下去了。