springboot vue是如何实现文件上传功能的

在Spring Boot中，可以使用Spring MVC框架提供的 `MultipartFile` 接口来实现文件上传功能。而在Vue中，可以使用 `axios` 库来发送文件上传请求，并将文件数据封装在 `FormData` 对象中。

下面是一个简单的例子，演示如何在Spring Boot和Vue中实现文件上传功能：

1. 在Vue中，使用 `axios` 库发送文件上传请求，代码如下：

<template>
  <div>
    <input type="file" ref="fileInput" @change="onFileChange" />
    <button @click="upload">上传</button>
  </div>
</template>

<script>
import axios from 'axios';

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

      axios.post('/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      })
      .then(response => {
        console.log(response);
      })
      .catch(error => {
        console.log(error);
      });
    },
  },
};
</script>

2. 在Spring Boot中，使用 `MultipartFile` 接口来接收上传的文件，并保存到服务器文件系统中，代码如下：

@RestController
public class UploadController {

    @PostMapping("/upload")
    public String uploadFile(@RequestParam("file") MultipartFile file) {
        if (file.isEmpty()) {
            return "上传文件为空";
        }

        try {
            String fileName = file.getOriginalFilename();
            Path path = Paths.get("uploads/", fileName);
            Files.write(path, file.getBytes());
        } catch (IOException e) {
            e.printStackTrace();
            return "上传文件失败";
        }

        return "上传文件成功";
    }

}

在上面的例子中，使用 `@RequestParam` 注解来将上传的文件绑定到 `MultipartFile` 参数中，然后将文件保存到服务器文件系统中。

需要注意的是，在处理文件上传请求时，需要将请求头的 `Content-Type` 设置为 `multipart/form-data`，以告诉服务器请求体是一个包含文件数据的 `FormData` 对象。

这就是在Spring Boot和Vue中实现文件上传功能的简单步骤。当然，具体的实现可能因应用程序的需求而有所不同。