springboot 和vue 实现图片上传功能

可以使用Spring Boot和Vue.js来实现图片上传功能。下面是一个基本的示例：

在Spring Boot端，你可以使用`@PostMapping`注解来创建一个处理图片上传请求的控制器方法。你需要使用`MultipartFile`类型的参数来接收上传的文件。然后，你可以使用`transferTo()`方法将文件保存到服务器的指定位置。

@RestController
public class UploadController {
    @PostMapping("/upload")
    public String uploadFile(@RequestParam("file") MultipartFile file) {
        try {
            // 获取文件的字节数组
            byte[] bytes = file.getBytes();
            
            // 在这里处理文件保存的逻辑，比如保存到数据库或者文件系统中
            
            return "上传成功";
        } catch (IOException e) {
            e.printStackTrace();
            return "上传失败";
        }
    }
}

在Vue.js端，你可以使用`vue-axios`库来发送文件上传请求。首先，你需要引入必要的依赖和配置：

// main.js
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

然后，在Vue组件中，你可以创建一个文件选择器，并在选择文件后将其发送到服务器：

<template>
  <div>
    <input type="file" @change="handleFileUpload">
    <button @click="uploadFile">上传</button>
  </div>
</template>

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

这样，当你选择文件并点击上传按钮时，Vue组件会将文件发送到Spring Boot端的上传接口。

请注意，以上只是一个简单的示例，你可能还需要添加一些额外的逻辑来处理文件的保存、文件格式的验证等。此外，你还可以使用一些第三方库来简化文件上传的流程，比如`vue-upload-component`或`element-ui`等。