SpringBoot Vue图片传输以及渲染

将图片在后端转为Base64 然后前端渲染Base64编码后的图片

spring boot

1. 转码方法

2. 	/**
        * 将图片base64转码
        *
        * @param imgPath 图片路径
        * @return base64编码
        */
   public String getBaseImg(String imgPath) {
       InputStream in;
       byte[] data = null;
       try {
           in = new FileInputStream(imgPath);
           data = new byte[in.available()];
           in.read(data);
           in.close();
       } catch (IOException e) {
           e.printStackTrace();
       }
       //进行Base64编码
       BASE64Encoder encoder = new BASE64Encoder();
       return encoder.encode(data);
   }
   

3. 使用方法

   1. @Service
      public class FileFervice{
          public Object personImgs() {
              File file = new File("D:\\code\\img\\1.jpg");
              String base = getBaseImg(file);
              return base;
      	}
      }
      
      

   2. 在controller层返回给前端

   3. @RestController
      public class FileController{
          @Autowired
          private FileService fileService;
          
          @RequestMapping("/getImg")
          public Object getImg(){
              log.info("获取所有用户的市民码");
              //根据自己的返回格式返回就行
              return new Result().ok("200", "查询完成",fileService.personImgs());
          }
      }
      

   4. 后端调用完成,然后就是前端接收数据!!

vue 前端

1. <template>
     <div class="demo">
         <!--遍历数组中的数据-->
       <el-row :gutter="10" v-for="item in src">
         <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
           <div  class="grid-content bg-purple">
             <el-tag>{{item.username}}</el-tag>
             <img class="img" :src="'data:image/jpeg;base64,'+item.qrCode">
           </div>
         </el-col>
       </el-row>
     </div>
   </template>
   
   <script>
   import axios from "axios";
   
   export default {
     name: "PersonQrCode",
     data() {
       return {
         src: [],
       }
     },
     methods: {
       getImgs() {
         axios({
             //请求方式
           method: "get",
           //后端接口,根据自己的写
           url: 'http://localhost:8080/getImg',
         }).then(({data}) => {
           //避免添加重复的对象,每次请求成功后都要清空一下数组
           this.src = []
           for (let i = 0; i < data.data.length; i++) {
             //遍历出每个数据对象,将每个对象push到src数组中
             let datum = data.data[i];
             this.src.push(datum);
           }
   
         })
       },
     },
     mounted() {
       //每隔800毫秒就自动查询一次
       let o = setInterval(()=>{
         this.getImgs()
         console.log('查询市民码信息')
       },800)
     }
   }
   </script>
   
   <style>
   .el-col {
     border-radius: 4px;
   }
   
   .bg-purple-dark {
     background: #99a9bf;
   }
   
   .bg-purple {
     background: #d3dce6;
   }
   
   .bg-purple-light {
     background: #e5e9f2;
   }
   
   .grid-content {
     border-radius: 4px;
     min-height: 36px;
   }
   .img{
     width: 200px;
     height: 130px;
   }
   </style>
   
   

2. ok !!!