element的upload组件实现多文件上传只发送一次请求

截止目前为止，elementUI的upload组件实现多文件上传时都默认一个文件向后端发送一个请求，当要上传的文件过多对服务器来说是个不小的压力，我今天就来讲一下如何实现多文件上传，只发送一次请求。

1、首先简单介绍一下FromData对象

FormData对象可以以键值对的形式存放表单数据

调用append(key,value)方法存放数据

再次调用append(key,value1)时，因为key相同，value不同，value会形成集合:key,[value,value1]

更多方法请参考

2、为upload组件添加:http-request参数，重写上传行为

其他参数自行根据具体需求增减。

注:此时通过axios请求上传文件，action不赋值，但要存在

3、用axios把创建的FormData传递到后端

上代码：

<template>
  <div>
    <el-upload
        multiple
        :http-request="uploadFile"
        action
        class="upload-demo"
        ref="upload"
        :file-list="fileList"
        :auto-upload="false">
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
    </el-upload>
  </div>
</template>
<script>
export default {
  data() {
    return {
      formdata: '',
      fileList: []
    };
  },
  methods: {
    uploadFile(file) {
      this.formdata.append('file', file.file);    //向FormData对象的key多次存放文件，key与后端的@RequestParam("file")内参数保持一致
    },
    submitUpload() {
      this.formdata = new FormData;     //创建FormData对象
      this.$refs.upload.submit();
      this.$axios
          .post("http://localhost:8888/try/upload", this.formdata)
    }
  }
}
</script>

4、后端通过MultipartFile[]接收

@RestController
@RequestMapping("/try")
public class Try {
    @PostMapping("/upload")
    public String UploadFile(@RequestParam("file") MultipartFile[] manyFile){
        for (int i = 0; i < manyFile.length; i++) {
            String name = manyFile[i].getOriginalFilename();
            System.out.println(name);
        }
        return null;
    }
}

效果展示