SpringBoot给vue前端传图片

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 !!!

上一篇:git--git error: src refspec dev does not match any


下一篇:Android应用--简、美音乐播放器实现专辑倒影效果,androidstudio设置ndk版本