多文件上传 vue+springboot el-upload实现

实现多文件上传的方式有很多种，下面我将介绍一种基于 Vue 和 Spring Boot 的实现方式，使用的是 Element UI 的上传组件 el-upload。

前端实现：

1. 在 Vue 组件中引入 Element UI 的 el-upload 组件。

<template>
  <el-upload
    class="upload-demo"
    action="/api/upload"
    :multiple="true"
    :on-change="handleUploadChange"
    :on-remove="handleUploadRemove"
    :file-list="fileList">
    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>
</template>

2. 在 Vue 组件中定义 fileList 数组，用于存储上传的文件列表。

<script>
export default {
  data() {
    return {
      fileList: []
    }
  },
  methods: {
    handleUploadChange(file, fileList) {
      this.fileList = fileList
    },
    handleUploadRemove(file, fileList) {
      this.fileList = fileList
    }
  }
}
</script>

3. 在 Vue 组件中定义 handleUploadChange 和 handleUploadRemove 方法，用于监听上传文件的变化和删除文件的操作，更新 fileList 数组。

后端实现：

1. 在 Spring Boot 项目中定义上传文件的接口。

@RestController
@RequestMapping("/api")
public class FileUploadController {

    @PostMapping("/upload")
    public ResponseEntity<?> uploadFile(@RequestParam("file") MultipartFile[] files) {
        // TODO: 处理上传的文件
        return ResponseEntity.ok("上传成功");
    }
}

2. 在接口中使用 @RequestParam 注解接收上传的文件，可以使用 MultipartFile 类型的数组来接收多个文件。接收到文件后，可以根据需要进行处理，例如保存到本地磁盘或上传到云存储服务。

3. 在 application.properties 文件中配置文件上传的相关参数。

# 文件上传配置
spring.servlet.multipart.max-file-size=500KB
spring.servlet.multipart.max-request-size=100MB
spring.servlet.multipart.enabled=true

其中，max-file-size 和 max-request-size 分别设置了单个文件和总文件大小的最大值，enabled 表示是否启用文件上传功能。

以上就是基于 Vue 和 Spring Boot 的多文件上传实现方式，希望能对你有所帮助。