Spring+Vue前后端传输图片-简单易上手，copy直接用

---

前言

前端传图片给后端的方式，是通过bsae64传输，然后后端把接收到的转化为字节流在把图片展示出来

后端传前端直接传输了字节流

Base64是网络上最常见的用于传输8Bit字节码的编码方式之一，Base64就是一种基于64个可打印字符来表示二进制数据的方法

一、前端传后端

//参数为图片的静态文件地址
clickImg(size){
    //将图片传到后端
    this.changeBlob(size).then(res =>{
    let reader = new FileReader()
    // 读取图片，转化为blob格式是因为此方法参数为blob
    reader.readAsDataURL(res)
    // 读取完毕后的操作
    reader.onloadend = (e) => {
      // reader.result就是图片的base64字符串
      createScanCode(reader.result).then(res=>{
        //这就是个请求，后端对接好，参数用String类型接受就行
      })
    }
    })
    },
   //将地址转化为blob格式
 changeBlob(size){
    return new Promise(resolve => {
      const xhr = new XMLHttpRequest();
      xhr.open('GET',size, true);
      xhr.responseType = 'blob';
      xhr.onload = () => {
        if (xhr.status === 200) {
          resolve(xhr.response);
        }
      };
      xhr.send();
 });

二、后端接受，并返回给前端

 //用户生成二维码
    @PostMapping("/createScanCode")
    public R<?> createScanCode(@RequestBody SysScanCode sysScanCode) throws IOException, WriterException {
        //base64转字节流，然后想怎么操作都可以
        byte[] decoderBytes = Base64.getDecoder().decode(sysScanCode.getBasePic().split(",")[1]);
        //逻辑省略.....
        
        return R.ok();
    }

    //用户拿出图片
    @PostMapping("/getScanCode")
    public ResponseEntity<byte[]> getCode(@RequestBody SysScanCode user){
    	//我这边是从数据库里边直接拿出来
    	//拿的过程就省略了
        byte[] scanCode = sysScanCode.getScanCode();
        final HttpHeaders headers = new HttpHeaders();
        headers.setContentType(MediaType.IMAGE_PNG);
        //把字节流直接放进去传给前端就ok
        return new ResponseEntity<>(scanCode,headers, HttpStatus.OK);
    }

三，前端接受返回

//直接一个请求，接受到后端传过来的字节流
getScancode().then(res=>{
            let blob=new Blob([res])
            //利用这个方法生成url直接拿到标签里边用
            let url =window.URL.createObjectURL(blob)
        })