spring boot + vue 上传文件

你可以使用Spring Boot和Vue.js来实现文件上传功能。下面是一个简单的示例：

1. 在Spring Boot中，首先需要配置文件上传的相关依赖。可以在pom.xml文件中添加以下依赖：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>

2. 创建一个用于处理文件上传的Controller类。在该类中，你可以使用`@RequestParam`注解来接收上传的文件，并使用`MultipartFile`类来处理文件数据。

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

    @PostMapping("/upload")
    public String uploadFile(@RequestParam("file") MultipartFile file) {
        // 处理文件上传逻辑
        // 返回上传成功的消息
        return "File uploaded successfully!";
    }
}

3. 在Vue.js中，你可以使用`axios`库来进行文件上传。首先，安装axios库：

npm install axios

4. 创建一个Vue组件，用于处理文件上传操作。在该组件中，你可以使用`FormData`对象来构建文件上传请求，并使用axios库来发送请求。

<template>
  <div>
    <input type="file" ref="fileInput" @change="handleFileChange">
    <button @click="uploadFile">Upload</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      file: null
    };
  },
  methods: {
    handleFileChange(event) {
      this.file = event.target.files[0];
    },
    uploadFile() {
      if (this.file) {
        let formData = new FormData();
        formData.append('file', this.file);

        axios.post('/api/upload', formData)
          .then(response => {
            console.log(response.data);
            // 处理上传成功的逻辑
          })
          .catch(error => {
            console.error(error);
            // 处理上传失败的逻辑
          });
      }
    }
  }
};
</script>

这样，你就可以在Vue.js中实现文件上传功能了。当用户选择文件后，点击"Upload"按钮，文件将被上传到Spring Boot服务器，并返回上传成功的消息。

请注意，这只是一个简单的示例，你可能还需要添加一些验证和错误处理的逻辑来完善该功能。