SpringBoot+Vue+ElementUi多文件上传（前后端代码）

1. 前端代码
   前端使用vue和ElementUI
   HTML

<template>
  <div>
    <el-form :inline="true" :model="mulData" class="demo-form-inline">
      <el-form-item label="Approved by">
        <el-input v-model="mulData.user" placeholder="请输入用户名称" clearable/>
      </el-form-item>
      <div>

        <el-form-item>
          <el-upload
              :file-list="fileList"
              class="upload-demo"
              action=""
              :auto-upload="false"
              :on-change="handleChange"
          >
            <el-button type="primary">上传文件</el-button>
            <template #tip>
              <div class="el-upload__tip">
                jpg/png files with a size less than 500kb
              </div>
            </template>
          </el-upload>
        </el-form-item>
      </div>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">上传</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>

script

<script>
import  {mulFile} from './api/nomralApi'
export default {
  data() {
    return {
      mulData: {
        user: '',
        fileList: []
      },
      fileList: []
    }
  },
  methods: {
    handleChange(file, fileList) {
      // this.mulData.fileList.push(file.raw)
      this.mulData.fileList = fileList
      console.log("文件数：",this.mulData.fileList.length)
    },
    onSubmit() {
      console.log("上传的数据")
      console.log(this.mulData)

      let formData = new FormData()
      // 如需添加其他参数，增加下面的代码即可
      // formData.append("user",this.mulData.user)
      // 使用这种方式添加文件
      this.mulData.fileList.forEach((file) => {
        formData.append('image', file.raw)
      })
      mulFile(formData).then(res=>{
        console.log(res)
      }).catch(err=>{
        console.log(err)
      })
    }

  }
}
</script>

nomralApi.js文件

import axios from "../requests.js";

// 定义登陆方法
export function mulFile(formData) {
    // 发起post请求 post(请求地址)  post方法会返回一个promise对象
    const URL = '/mulFile';
    return axios.post(
        URL,
        formData,
        )
}

2.后端代码

（1）不带其他参数

@RestController
public class MulController {

    @PostMapping("/mulFile")
    public ResponseEntity<Map<String, Object>> mulFile(@RequestParam("image") MultipartFile[] fileList) {
    	
    	// 处理逻辑 ......
    	
        return new ResponseEntity<>(map, HttpStatus.ACCEPTED);
    }
}

（2）带其他参数

@RestController
public class MulController {

    @PostMapping("/mulFile")
    public ResponseEntity<Map<String, Object>> mulFile(String user ,@RequestParam("image") MultipartFile[] fileList) {
		
		// 处理逻辑 ......
		
        return new ResponseEntity<>(map, HttpStatus.ACCEPTED);
    }
}

如果后端报错 Current request is not a multipart request ，可以设置请求头headers:{‘Content-Type’: ‘multipart/form-data’}