如何在Vue.js与Spring Boot项目中实现图片的上传功能？

在Vue.js与Spring Boot项目中实现图片上传功能通常涉及到前端使用Vue组件处理用户输入，然后通过Ajax或者axios库发送HTTP请求到Spring Boot后端服务器。以下是步骤概述：

1. **前端Vue部分**:
- 使用Vue的`v-model`指令创建一个file input元素，允许用户选择文件。
- 创建一个提交按钮，当点击时触发上传事件。
- 使用`axios`库发起POST请求，将选中的文件作为`FormData`对象的一部分发送。

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

<script>
import axios from 'axios';

export default {
  methods: {
    uploadFile(e) {
      const file = this.$refs.imageInput.files[0];
      if (file) {
        this.submitUpload(file);
      }
    },
    submitUpload(file) {
      const formData = new FormData();
      formData.append('image', file);
      
      axios.post('/api/upload', formData, { headers: {'Content-Type': 'multipart/form-data'} })
        .then(response => {
          console.log('上传成功:', response.data);
        })
        .catch(error => {
          console.error('上传失败:', error);
        });
    },
  }
};
</script>

2. **后端Spring Boot部分**:
- 创建一个Spring控制器，接收`MultipartFile`类型的请求体，这通常是`@RequestParam("image") MultipartFile image`这样的注解。
- 将文件保存到服务器指定的位置，并返回响应或状态码表示成功。

import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;

@PostMapping("/api/upload")
public String handleImageUpload(@RequestParam("image") MultipartFile image) {
    try {
        // 保存文件到服务器目录
        saveUploadedFile(image);
        return "success"; // 返回成功信息
    } catch (Exception e) {
        return "error"; // 返回错误信息
    }
}

private void saveUploadedFile(MultipartFile file) throws IOException {
    byte[] bytes = file.getBytes();
    // ...其他处理如上传到数据库或存储服务
}