使用Vue和Spring Boot实现前端图片获取

梦里梦外; 2022-11-21 04:11 111阅读 0赞

**推荐：**[Vue学习汇总][Vue]

## 使用Vue和Spring Boot实现前端图片获取 ##

前端通过后端请求图片数据也是很常见的业务需求，这里博主给大家演示一下。

前端：

<template>
        <div class="blog">
            <div class="gain">
                <img :src="'data:image;base64,'+image">
                <button @click="gain()"><span>获取图片</span></button>
            </div>
        </div>
    </template>
    <script>
    export default{ 
        name:'blog',
        data(){ 
            return { 
                image:'',
            }
        },
        methods:{ 
            gain(){ 
                this.axios.get('/file/image').then((res)=>{ 
                    this.image = res;
                    this.$message.success('文件获取成功');
                }).catch((res)=>{ 
                    this.$message.error('文件获取失败');
                })
            },
        }
    }
    </script>

`<img :src="'data:image;base64,'+image">`图片标签要表明展示的是经过`base64`编码的图片（字符串）。

页面如下图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70]  
`router:js`：

import Vue from 'vue'
    import Router from 'vue-router'
    Vue.use(Router);
    
    export default new Router({ 
      routes:[
        { 
          path:'/',
          redirect:'/blog',
        },
        { 
          path: '/blog',
          name: 'blog',
          component: () => import('./pages/blog.vue')
        }
      ]
    });

`vue.config.js`：

module.exports = { 
      devServer:{ 
        host:'localhost',
        port:8080,
        proxy:{ 
          '/api':{ 
            target:'http://127.0.0.1:8081',
            changeOrigin:true,
            pathRewrite:{ 
              '/api':''
            }
          }
        }
      },
      lintOnSave:false,
      productionSourceMap:true
    }

后端：  
`pom.xml`：

<?xml version="1.0" encoding="UTF-8"?>
    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
        <modelVersion>4.0.0</modelVersion>
    
        <parent>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-parent</artifactId>
            <version>2.3.4.RELEASE</version>
            <relativePath/> 
        </parent>
    
        <groupId>com.kaven</groupId>
        <artifactId>system</artifactId>
        <version>0.0.1-SNAPSHOT</version>
    
        <name>system</name>
        <description>系统</description>
    
        <properties>
            <java.version>1.8</java.version>
        </properties>
    
        <dependencies>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter</artifactId>
            </dependency>
    
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-web</artifactId>
            </dependency>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-test</artifactId>
            </dependency>
            <dependency>
                <groupId>org.projectlombok</groupId>
                <artifactId>lombok</artifactId>
            </dependency>
        </dependencies>
    
        <build>
            <plugins>
                <plugin>
                    <groupId>org.springframework.boot</groupId>
                    <artifactId>spring-boot-maven-plugin</artifactId>
                </plugin>
            </plugins>
        </build>
    </project>

`application.yml`：

spring:
      servlet:
        multipart:
          max-file-size: 500MB
          max-request-size: 500MB
    
    logging:
      pattern:
        console: '[%p]-%m%n'
    
    server:
      port: 8081

启动类：

package com.kaven.system;
    
    import org.springframework.boot.SpringApplication;
    import org.springframework.boot.autoconfigure.SpringBootApplication;
    
    @SpringBootApplication
    public class Application { 
    
        public static void main(String[] args){ 
            SpringApplication.run(Application.class, args);
        }
    }

`FileController`：

package com.kaven.system.controller;
    
    import com.kaven.system.enums.ResponseEnum;
    import com.kaven.system.vo.ResponseVo;
    import org.apache.tomcat.util.http.fileupload.IOUtils;
    import org.junit.platform.commons.util.StringUtils;
    import org.springframework.web.bind.annotation.*;
    import org.springframework.web.multipart.MultipartFile;
    import sun.misc.BASE64Encoder;
    
    import java.io.*;
    
    @RestController
    @RequestMapping("/file")
    public class FileController { 
    
        @GetMapping("/image")
        public ResponseVo<String> image() throws IOException { 
            String path = "E:/1.jpg";
            return ResponseVo.success(getImage(path));
        }
    
        private String getImage(String path) throws IOException { 
    
            //读取图片变成字节数组
            FileInputStream fileInputStream = new FileInputStream(path);
    
            ByteArrayOutputStream bos = new ByteArrayOutputStream();
            byte[] b = new byte[1024];
            int len = -1;
            while((len = fileInputStream.read(b)) != -1) { 
                bos.write(b, 0, len);
            }
            byte[] fileByte = bos.toByteArray();
    
            //进行base64编码
            BASE64Encoder encoder = new BASE64Encoder();
            String data = encoder.encode(fileByte);
    
            return data;
        }
    }

先读取图片变成字节数组，然后进行`base64`编码。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70 1]

`ResponseVo<T>`：

package com.kaven.system.vo;
    
    import com.fasterxml.jackson.annotation.JsonInclude;
    import com.kaven.system.enums.ResponseEnum;
    import lombok.Data;
    
    @Data
    @JsonInclude(value = JsonInclude.Include.NON_NULL)
    public class ResponseVo<T> { 
    
        private Integer status;
    
        private String msg;
    
        private T data;
    
        private ResponseVo(Integer status, String msg) { 
            this.status = status;
            this.msg = msg;
        }
    
        private ResponseVo(Integer status, T data) { 
            this.status = status;
            this.data = data;
        }
    
        public static <T> ResponseVo<T> success(T data){ 
            return new ResponseVo<T>(ResponseEnum.SUCCESS.getCode(), data);
        }
    
        public static <T> ResponseVo<T> error(ResponseEnum responseEnum){ 
            return new ResponseVo<T>(responseEnum.getCode() , responseEnum.getDesc());
        }
    }

`ResponseEnum`：

package com.kaven.system.enums;
    
    import lombok.Getter;
    
    @Getter
    public enum ResponseEnum { 
    
        ERROR(-1 ,"服务端错误"),
    
        SUCCESS(0, "成功"),
    
        File_NOT_EXIST(13 , "文件为空"),
    
        ;
    
        Integer code;
    
        String desc;
    
        ResponseEnum(Integer code, String desc) { 
            this.code = code;
            this.desc = desc;
        }
    }

测试：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70 2]  
很显然图片是获取成功了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70 3]  
使用Vue和Spring Boot实现前端图片获取就介绍到这里。

写博客是博主记录自己的学习过程，如果有错误，请指正，谢谢！

[Vue]: https://kaven.blog.csdn.net/article/details/109508022
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70]: /images/20221120/c10d2c0b81334eeab6de78daf8e507ac.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70 1]: /images/20221120/35d729bf78ca4604adbb49d0ec1c40f2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70 2]: /images/20221120/5e1fce0245f24e099382830568ee923b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70 3]: /images/20221120/ff54276ec16e4d9e804ef2ec6477d100.png