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