Java+vue图片下载功能

在Java后端与Vue前端配合实现图片下载功能时，通常会有这样的流程：

1. **Java后端**:
- 定义一个RESTful API，比如`GET /api/images/{imageId}`，接收请求参数并返回指定图片的二进制数据。这个API应该处理文件读取和响应设置，例如设置Content-Type为`image/*`。

   @GetMapping("/api/images/{id}")
   ResponseEntity<InputStreamResource> getImage(@PathVariable Long id) {
       try {
           File imageFile = new File("path/to/image/" + id);
           return ResponseEntity.ok().contentType(MediaType.IMAGE_JPEG)
               .body(new InputStreamResource(new FileInputStream(imageFile)));
       } catch (IOException e) {
           throw new RestException(HttpStatus.INTERNAL_SERVER_ERROR, "Failed to read image file");
       }
   }

2. **Vue前端**:
- 使用axios等HTTP库发送GET请求到后端API，并监听响应。
- 当接收到响应时，创建一个新的`Blob`对象来存储二进制数据，然后创建一个URL.createObjectURL()，生成一个临时链接，用户点击该链接即可下载图片。

export const downloadImage = async (imageUrl) => {
    const response = await axios.get('/api/images/' + imageUrl);
    const blob = new Blob([response.data], { type: 'image/jpeg' });
    const url = URL.createObjectURL(blob);
    // 创建一个隐藏的<a>元素
    const a = document.createElement('a');
    a.href = url;
    a.download = 'image.jpg'; // 或者从服务器获取实际名称
    a.click();
    URL.revokeObjectURL(url); // 下载完成删除临时URL
};