springboot+vue上传图片

这里是一个简单的示例，演示了如何在Spring Boot中从Vue.js上传图像：

1.前端Vue.js代码：

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

<script>
export default {
      
      
  name: 'ImageUploader',
  data() {
      
      
    return {
      
      
      imageFile: null,
      imageUrl: ''
    };
  },
  methods: {
      
      
    handleFileUpload(event) {
      
      
      this.imageFile = event.target.files[0];
    },
    uploadImage() {
      
      
      let formData = new FormData();
      formData.append('image', this.imageFile);
      axios.post('/api/image/upload', formData, {
      
      
        headers: {
      
      
          'Content-Type': 'multipart/form-data'
        }
      }).then(response => {
      
      
        this.imageUrl = response.data.imageUrl;
      });
    }
  }
};
</script>

后端Spring Boot代码：

@RestController
public class ImageController {
    
    

    @Value("${upload.path}")
    private String uploadPath;

    @PostMapping("/api/image/upload")
    public ResponseEntity<?> uploadImage(@RequestParam("image") MultipartFile file) {
    
    
        Map<String, Object> response = new HashMap<>();
        try {
    
    
            if (!file.isEmpty()) {
    
    
                String fileName = file.getOriginalFilename();
                Path filePath = Paths.get(uploadPath + "/" + fileName);
                Files.copy(file.getInputStream(), filePath, StandardCopyOption.REPLACE_EXISTING);
                String imageUrl = "/api/image/" + fileName;
                response.put("imageUrl", imageUrl);
            } else {
    
    
                response.put("status", "error");
                response.put("message", "No file uploaded");
                return ResponseEntity.badRequest().body(response);
            }
        } catch (IOException e) {
    
    
            response.put("status", "error");
            response.put("message", e.getMessage());
            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(response);
        }
        response.put("status", "success");
        return ResponseEntity.ok(response);
    }

    @GetMapping("/api/image/{fileName:.+}")
    public ResponseEntity<Resource> getImage(@PathVariable String fileName) throws IOException {
    
    
        Path filePath = Paths.get(uploadPath + "/" + fileName);
        Resource resource = new UrlResource(filePath.toUri());
        return ResponseEntity.ok().contentType(MediaType.IMAGE_JPEG).body(resource);
    }
}

这是一个非常简单的示例，涵盖了从Vue.js前端上传一个图像并将其保存到Spring Boot后端服务器的全部过程。你可以根据实际需求进行修改和扩展。

springboot+vue上传图片

猜你喜欢