java后端返回二进制图片 前端进行展示 详解

java后端代码：

/**
     * 图片展示
     * @param map
     * @return
     */
    @ApiOperation("图片展示")
    @PostMapping("/getPucter")
    public Result getPucter(@RequestBody Map<String,String> map, HttpServletRequest request, HttpServletResponse respones){
          
   
        String str = service.getPucter(map,request,respones);
        return new Result(200,"成功！",str);
    }
    @Override
    public String getPucter(Map<String, String> map, HttpServletRequest request, HttpServletResponse respones) {
          
   
        String str = "";
        List<Map<String,String>> list = mapper.getFileUrl(map.get("id"));
        if (list!=null && list.size()>0) {
          
   
            Map<String,String> mapList = list.get(0);
            String url = mapList.get("URL");
            str = FileUtil.getPhoto(respones,url);
        }
        return str;
    }
//path 为图片在服务器的绝对路径
    public static String getPhoto(HttpServletResponse response,String path) {
          
   
        try {
          
   
            File file = new File(path);
            FileInputStream fis;
            fis = new FileInputStream(file);

            long size = file.length();
            System.out.println(size);
            byte[] temp = new byte[(int) size];
            fis.read(temp, 0, (int) size);
            fis.close();
            byte[] data = temp;
            return  new String(Base64.encodeBase64(data));
        } catch (IOException e) {
          
   
            e.printStackTrace();
            return null;
        }

    }

vue页面

<el-image style="width: 100px; height: 100px" :src="imgUrl" fit="cover"></el-image>

js代码

// 获取图片
  static getPucter (data) {
    return request({
      url: /fileOps/getPucter,
      timeout: 100000,
      method: post,
      data: data
    })
  }
handleArchived () {
      let _this = this
      importantMap.getPucter({id: this.noteFromList.FILE_ID}).then(res => {
        let src = res.data.data
        src = src == null ?  : data:image/jpg;base64, + src
        _this.imgUrl = src
      })
    }