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

男娘i 2022-12-10 14:42 206阅读 0赞

需求描述：点击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;
        }
    }