el-upload 多文件一次性上传（axios+formdata）

1. 前端 el-upload

<template>
  <!--  vue属性加冒号: 变量或者表达式  -->
  <!--  vue属性不加冒号: 字符串字面量  -->
  <el-upload
    class="upload-demo"
    ref="upload"
    action=""
    :limit="2"
    :on-change="changeFile"
    :on-remove="removeFile"
    :file-list="fileList"
    :auto-upload="false">
    <!--  slot="trigger" 触发文件选择框的内容  -->
    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">查重</el-button>
    <!--  slot="tip" 提醒文字说明  -->
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>
</template>

:file-list=“fileList”
:on-change=“changeFile”
:on-remove=“removeFile”
这三个主要是为了让自定义的变量fileList取到文件列表的值

2. 前端script

<script>
export default {
  data() {
    return {
      fileList: [] //一定要写
    };
  },
  methods: {
    changeFile(file, fileList) {
      this.fileList = fileList; // 再一次赋值
    },
    removeFile(file, fileList) {
      this.fileList = fileList; // 再一次赋值
    },
    submitUpload() {
      const isLt = this.fileList.length === 2;
      if (isLt) {
        let formData = new FormData()
        for (let i = 0; i < this.fileList.length; i++) {
          formData.append("files", this.fileList[i].raw) // formdata 添加数组的独特方式
        }
        this.axios({
          method: 'post',
          url: '/test/uploadArray',  // 后端接口地址
          headers: {'Content-Type': 'multipart/form-data'},
          data: formData
        })
      } else {
        alert("请选择两个文件");
      }
    }
  }
}
</script>

注意：
config/index.js里面别忘记配置跨域信息

3. 后端接口

@RestController
@RequestMapping("/test")
public class UploadController {

    @PostMapping(value = "/uploadArray")
    public void uploadArray(@RequestParam("files") MultipartFile[] files) {

        System.out.println(files[0].getOriginalFilename());
        System.out.println(files[1].getOriginalFilename());

    }

}

菜不可耻，毕竟你们也不认识我，哈哈哈哈哈
碎碎念：这个东西搞了好久，走了好多弯路，最后终于写出来了，记录一下