vue+springboot上传图片代码如何实现

这里提供一个简单的示例代码。

前端部分：使用Vue.js实现图片上传

1. 在Vue组件中定义一个文件上传input元素，并绑定一个change事件：

<template>
  <div>
    <input type="file" @change="handleFileUpload">
  </div>
</template>

2. 在Vue组件中定义一个handleFileUpload方法，当文件上传input的值发生变化时，将上传的文件存储到data属性中的uploadedFile中：

<script>
export default {
  data() {
    return {
      uploadedFile: null
    }
  },
  methods: {
    handleFileUpload(event) {
      this.uploadedFile = event.target.files[0];
    }
  }
}
</script>

3. 在Vue组件中定义一个submit方法，将上传的文件发送到后端：

<script>
export default {
  methods: {
    submit() {
      let formData = new FormData();
      formData.append('file', this.uploadedFile);
      axios.post('/api/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
      .then(response => {
        console.log(response.data);
      })
      .catch(error => {
        console.log(error);
      });
    }
  }
}
</script>

后端部分：使用Spring Boot实现图片上传

1. 在Spring Boot中定义一个Controller，处理文件上传的请求：

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

  @PostMapping("/upload")
  public String uploadFile(@RequestParam("file") MultipartFile file) {
    try {
      byte[] bytes = file.getBytes();
      Path path = Paths.get("uploads/" + file.getOriginalFilename());
      Files.write(path, bytes);
      return "File uploaded successfully!";
    } catch (IOException e) {
      e.printStackTrace();
      return "File upload failed!";
    }
  }
}

2. 在Spring Boot的application.properties中配置文件上传的相关属性：

spring.servlet.multipart.enabled=true
spring.servlet.multipart.max-file-size=10MB
spring.servlet.multipart.max-request-size=10MB

注意：这里的配置表示上传的文件大小不能超过10MB。

以上就是一个简单的vue+springboot上传图片的代码实现。