Modify the upload component of element to support multiple files to be uploaded at one time

The Upload component in Element should be a component we often use. It is usually used for some file Upload operations. However, although the corresponding demo can support the selective Upload of multiple files, each file Upload calls an interface, which is not so convenient for operation.

Today, I'll take you to modify the component, put the file to be uploaded into the same request and send it to the server.

First, take a look at the corresponding document

https://element-plus.gitee.io...

In the attribute list, we can see that there are some attributes for us to use

Then there's the idea,

To send multiple files to the background in one form, we need to get all the files at one time, then append the files to one form, and finally send the request.

First, let's take a look at the first step. We need to know the files used. First, let's find out where the files are cached? Or how can the files be saved to the form one by one

Let's start with the first simple example

<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>

Run it, you can find that it will print many times, and the console prints 1 out first each time.

The corresponding fileList is all the selected files. We need an identifier. Let the handleChange function execute only once, and continue to modify it to the following code

<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>

The corresponding file List has been obtained. The rest is to write a method, append them to the form, and then send them. Next, write a function to handle it

function appendFile(files){
  const formData = new FormData()
  files.foreach((file)=>{
     formData.append('file',file)
  })
  return file
}

If you need to record the number of files selected at the beginning, just use the following code, and replace the specific details by yourself

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 in the above function is the total number of files selected at the beginning. Of course, you can also find the total number of files first, and then append the files to the form in before upload, which is more troublesome.. But to be honest, that's what I wrote at the beginning (by counting, after append, perform - 1 operation, and wait until 0 to send the request). Hahaha, I really follow the train of thought.