vue—spring boot项目多文件上传

在 Vue-Spring Boot 项目中，可以使用 Vue.js 前端框架和 Spring Boot 后端框架来实现多文件上传。具体步骤如下：

1. 在 Vue.js 中，可以使用 `<input type="file" multiple>` 标签来实现多文件上传。

2. 在 Vue.js 中，可以使用 `FormData` 对象来构造包含文件数据的表单数据，然后使用 `axios.post()` 方法将表单数据发送到后端。

3. 在 Spring Boot 中，可以使用 Spring MVC 组件的 `@RequestParam("file") MultipartFile[] files` 参数来接收上传的文件数组。

4. 在 Spring Boot 中，可以使用 `MultipartFile` 对象的 `transferTo()` 方法将上传的文件保存到指定的目录中。

一个简单的 Vue-Spring Boot 多文件上传示例代码如下：

Vue.js 前端代码：

<template>
  <div>
    <input type="file" multiple @change="onFileChange">
    <button @click="uploadFiles">上传</button>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      files: null
    }
  },
  methods: {
    onFileChange(event) {
      this.files = event.target.files
    },
    uploadFiles() {
      const formData = new FormData()
      for (let i = 0; i < this.files.length; i++) {
        formData.append('file', this.files[i])
      }
      axios.post('/upload', formData)
        .then(response => {
          console.log(response.data)
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
}
</script>

Spring Boot 后端代码：

@PostMapping("/upload")
public String uploadFiles(@RequestParam("file") MultipartFile[] files) {
    try {
        for (MultipartFile file : files) {
            String fileName = file.getOriginalFilename();
            String filePath = "/path/to/save/file/" + fileName;
            file.transferTo(new File(filePath));
        }
        return "上传成功";
    } catch (Exception e) {
        e.printStackTrace();
        return "上传失败";
    }
}

需要注意的是，如果上传的文件比较大，可能会导致内存溢出。可以考虑使用 `MultipartFile` 对象的 `transferTo()` 方法直接将文件保存到磁盘上，避免将文件保存在内存中。另外，在实际开发中，还需要考虑安全性和性能优化等问题。