Vue 解决element ui 多文件上传的问题

业务场景：

在使用vue+elementui 实现文件上传的时候，我发现官网给的组件每次都会自动上传，而且一次上传一个文件。但是我实际的业务是，一次上传多个文件。

解决办法：

前端代码：

<template>
  <div>
<!--    文件上传组件-->
<!--      :auto-upload="false" 这里设置为不自动上传 ，所以:action="BASE_API+'/upload'“ 失效-->
  <el-upload
    name="files"
    class="upload-demo"
    :on-change="OnChange"
    :multiple="true"

    :action="BASE_API+'/upload'"
    :on-preview="handlePreview"
    :before-remove="beforeRemove"
    :file-list="list"
    :auto-upload="false"
    list-type="picture">
    <i class="el-icon-plus"></i>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>
  <el-dialog :visible.sync="dialogVisible">
    <img width="100%" :src="dialogImageUrl" alt="">
  </el-dialog>
  <el-button type="" @click="fun">点击查看filelist</el-button>
  <el-button type="" @click="onSubmit">提交</el-button>
  </div>

</template>

<script>
  import upload from "@/api/upload"
  import request from "@/utils/request"

  export default {
    data() {
      return {
        param: new FormData(),
        form:{},
        count:0,
        list:[],
        dialogVisible:false,
        dialogImageUrl:'',
        BASE_API: process.env.BASE_API, // 接口API地址
      };
    },
    methods: {
      handlePreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
      OnChange(file,fileList){

        console.log(fileList)
        this.list=fileList

      },
      OnRemove(file,fileList){
        this.list=fileList
      },
      fun(){
        console.log('------------------------')
        console.log(this.list)
      },
      onSubmit(){

        // this.form={
        //   a:1,
        //   b:2,
        //   c:3
        // }
        // let file=''
        // for(let x in this.form){
        //   this.param.append(x,this.form[x])
        // }
        // for(let i=0;i<this.list.length;i++){
        //    const file='file'+this.count
        //   this.count++
        //   this.param.append(file,this.list[i].raw)
        // }
        // console.log(this.param)

        console.log(this.list[0])

        let formData = new FormData();
        let file1 = this.list[0]
        let file2 = this.list[1]
        console.log(file1)
        console.log(file2)
        // 这里必须是 .raw 不然后端springboot multipart 获取到的文件为 null
        // 单个文件的话 后端接口写 Multipart file
        // 多个文件的话 后端接口写 Multipart [] files
        // 文件名需要对应
        formData.append('files', file1.raw);
        formData.append('files', file2.raw);
        // formData.append('name', 'zhangsan');
        // formData.append('files[]', file2);

        request.post('/upload',formData,{
          headers: {
            'Content-Type': 'multipart/form-data'
          }}).then(res=>{
          console.log(res)
        })

        // request.post('/testabc?name='+formData.get("name")).then(res=>{
        //   console.log(res)
        // })

        // upload.uploadfile(formData).then(res=>{
        //   console.log(res)
        // })
        // batchTagInfo(this.param)
        //   .then(res=>{
        //     alert(res)
        //   })
      }
    }

  }
</script>

<style scoped>

</style>

后端接口代码：

package com.yj.wiki.controller;

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

@RestController
@CrossOrigin
public class UploadFileController {

    @PostMapping("/upload")
    public String upload(MultipartFile[] files){

        for (MultipartFile file : files) {
            System.out.println(file.getOriginalFilename());

        }

        return "ok";
    }

    @PostMapping("/testabc")
    public String upload(String name){

        System.out.println(name    );

        return "ok";
    }
}