springboot -vue图片上传

Spring Boot和Vue.js是两个独立的技术，分别用于后端和前端开发。图片上传是一个常见的功能，可以通过Spring Boot提供的后端接口和Vue.js提供的前端组件来实现。

在Spring Boot中，可以使用Spring MVC来处理HTTP请求，并通过MultipartFile类来处理文件上传。以下是一个简单的示例代码：

1. 后端代码（Spring Boot）：

@RestController
public class FileUploadController {
    @PostMapping("/upload")
    public String uploadFile(@RequestParam("file") MultipartFile file) {
        // 处理文件上传逻辑
        // ...
        return "File uploaded successfully!";
    }
}

2. 前端代码（Vue.js）：

<template>
  <div>
    <input type="file" @change="handleFileUpload">
    <button @click="uploadFile">Upload</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);
      
      // 发送文件上传请求
      // ...
    }
  }
}
</script>

以上代码演示了一个简单的图片上传功能，用户可以选择图片文件并点击"Upload"按钮进行上传。在前端，通过`<input type="file">`元素获取用户选择的文件，并将其保存在Vue实例的`file`属性中。在后端，通过`@RequestParam`注解获取上传的文件，并进行相应的处理。