Springboot 和 VUE 前后端分离的数据交互

需求描述：点击VUE页面上的一个点，传回d[3]值代表图片序号，向后端发送请求，后端接收序号，找到对应图片后转换成流，再把流以图片形式传回给VUE。

VUE中的点击事件：

.on("click", d => {
              this.getImg("/getImg",d[3]).then(res =>{
                console.log(res);
                this.stateSrc = window.URL.createObjectURL(res.data);
              })
            })

getImg(url, query){
        return request({
          url:url,
          params:{
            path_index:query  //注意参数名应和controller中的@RequestParam相同
          },
          responseType:'blob'
        })
      },

其中request.js （写完之后需要 npm i 重构一下项目）

import axios from 'axios'

export function request(config){
    const instancel = axios.create({
        baseURL:'http://localhost:8088', //修改为springboot项目的端口号
        timeout:10000
    })

    return instancel(config)
}

Springboot -Controller

@CrossOrigin(value = "*", allowCredentials = "true") //解决跨域问题
@Controller
public class BreakoutNoFrameskipController {

    @RequestMapping("/demo")
    public String show(){
        return "test";
    }

    @Value("${file.uploadFolder}")
    private String uploadFolder; //本地地址路径

    @GetMapping("/getImg")
    @ResponseBody
    public void getImage(@RequestParam String path_index,HttpServletResponse rsp) throws Exception{

        System.out.println("path_index: "+path_index); //得到这是第几张图片
        byte[] imageContent ;
        String path = uploadFolder+path_index+".png";
        imageContent = fileToByte(new File(path));
        rsp.setHeader("Content-Type", "image/png");
        rsp.getOutputStream().write(imageContent);
    }

    //把图片转换成流
    public static byte[] fileToByte(File img) throws Exception {
        byte[] bytes = null;
        ByteArrayOutputStream baos = new ByteArrayOutputStream();
        try {
            BufferedImage bi;
            bi = ImageIO.read(img);
            ImageIO.write(bi, "png", baos);
            bytes = baos.toByteArray();
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            baos.close();
        }
        return bytes;
    }
}